<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>[M]表单+表格+存储 | Plana(方案A)</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="https://luo0412.gitee.io/static/images/logo/favicon.ico">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>$(function () {
    $(".navbar .dropdown-wrapper .title").each(function (index, item) {
        var title = $(item).text() || ""
        console.log(title)
        var index = title.indexOf("(")
        if (index > -1) {
            $(item).text(title.slice(0, index))
        }
    })
})

((window.gitter = {}).chat = {}).options = {
    room: 'luo0412/plana'
};</script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script>
    <meta name="description" content="方案A">
    <link rel="preload" href="/plana/assets/css/0.styles.e9cba6b3.css" as="style"><link rel="preload" href="/plana/assets/js/app.26a35d46.js" as="script"><link rel="preload" href="/plana/assets/js/2.b5bc497d.js" as="script"><link rel="preload" href="/plana/assets/js/365.060bb2cd.js" as="script"><link rel="prefetch" href="/plana/assets/js/10.76967f04.js"><link rel="prefetch" href="/plana/assets/js/100.5188df2c.js"><link rel="prefetch" href="/plana/assets/js/101.d84c20f9.js"><link rel="prefetch" href="/plana/assets/js/102.dcbad92b.js"><link rel="prefetch" href="/plana/assets/js/103.cbf31594.js"><link rel="prefetch" href="/plana/assets/js/104.227d809c.js"><link rel="prefetch" href="/plana/assets/js/105.4690789d.js"><link rel="prefetch" href="/plana/assets/js/106.76527743.js"><link rel="prefetch" href="/plana/assets/js/107.d6e3a4d6.js"><link rel="prefetch" href="/plana/assets/js/108.6e4c8bfc.js"><link rel="prefetch" href="/plana/assets/js/109.fc12471e.js"><link rel="prefetch" href="/plana/assets/js/11.569e93dd.js"><link rel="prefetch" href="/plana/assets/js/110.85c3d834.js"><link rel="prefetch" href="/plana/assets/js/111.9c605bc7.js"><link rel="prefetch" href="/plana/assets/js/112.12b9e5d6.js"><link rel="prefetch" href="/plana/assets/js/113.21ac7878.js"><link rel="prefetch" href="/plana/assets/js/114.e4dd9de7.js"><link rel="prefetch" href="/plana/assets/js/115.8600fa46.js"><link rel="prefetch" href="/plana/assets/js/116.043898d2.js"><link rel="prefetch" href="/plana/assets/js/117.5c6253ed.js"><link rel="prefetch" href="/plana/assets/js/118.0deaa07b.js"><link rel="prefetch" href="/plana/assets/js/119.0e1b78e7.js"><link rel="prefetch" href="/plana/assets/js/12.f97471e0.js"><link rel="prefetch" href="/plana/assets/js/120.da2dcbe4.js"><link rel="prefetch" href="/plana/assets/js/121.b67072a1.js"><link rel="prefetch" href="/plana/assets/js/122.4438dfd8.js"><link rel="prefetch" href="/plana/assets/js/123.ffb881d0.js"><link rel="prefetch" href="/plana/assets/js/124.ae643d5d.js"><link rel="prefetch" href="/plana/assets/js/125.782ff172.js"><link rel="prefetch" href="/plana/assets/js/126.9cb23b0a.js"><link rel="prefetch" href="/plana/assets/js/127.2c5e040e.js"><link rel="prefetch" href="/plana/assets/js/128.f96c3297.js"><link rel="prefetch" href="/plana/assets/js/129.379dad87.js"><link rel="prefetch" href="/plana/assets/js/13.40058c53.js"><link rel="prefetch" href="/plana/assets/js/130.f350d8cd.js"><link rel="prefetch" href="/plana/assets/js/131.9b494f44.js"><link rel="prefetch" href="/plana/assets/js/132.8a6c409e.js"><link rel="prefetch" href="/plana/assets/js/133.c691db55.js"><link rel="prefetch" href="/plana/assets/js/134.e8d8a94a.js"><link rel="prefetch" href="/plana/assets/js/135.c95a1ef6.js"><link rel="prefetch" href="/plana/assets/js/136.bdd4250b.js"><link rel="prefetch" href="/plana/assets/js/137.539d6db6.js"><link rel="prefetch" href="/plana/assets/js/138.c16e3cc1.js"><link rel="prefetch" href="/plana/assets/js/139.7a1243ca.js"><link rel="prefetch" href="/plana/assets/js/14.880c2d4f.js"><link rel="prefetch" href="/plana/assets/js/140.6ed0a182.js"><link rel="prefetch" href="/plana/assets/js/141.a984158d.js"><link rel="prefetch" href="/plana/assets/js/142.e094f73f.js"><link rel="prefetch" href="/plana/assets/js/143.760a5510.js"><link rel="prefetch" href="/plana/assets/js/144.212ede62.js"><link rel="prefetch" href="/plana/assets/js/145.2e06e4c9.js"><link rel="prefetch" href="/plana/assets/js/146.16713494.js"><link rel="prefetch" href="/plana/assets/js/147.7b0585c3.js"><link rel="prefetch" href="/plana/assets/js/148.ae82990b.js"><link rel="prefetch" href="/plana/assets/js/149.73a7c703.js"><link rel="prefetch" href="/plana/assets/js/15.5364aa14.js"><link rel="prefetch" href="/plana/assets/js/150.fec18e0b.js"><link rel="prefetch" href="/plana/assets/js/151.14bf6cea.js"><link rel="prefetch" href="/plana/assets/js/152.17f17b04.js"><link rel="prefetch" href="/plana/assets/js/153.ba7c5f21.js"><link rel="prefetch" href="/plana/assets/js/154.d3340db4.js"><link rel="prefetch" href="/plana/assets/js/155.2bf1dbde.js"><link rel="prefetch" href="/plana/assets/js/156.70d23de7.js"><link rel="prefetch" href="/plana/assets/js/157.93a62465.js"><link rel="prefetch" href="/plana/assets/js/158.bf486b60.js"><link rel="prefetch" href="/plana/assets/js/159.f19e7955.js"><link rel="prefetch" href="/plana/assets/js/16.e96c9bd3.js"><link rel="prefetch" href="/plana/assets/js/160.3dc61d59.js"><link rel="prefetch" href="/plana/assets/js/161.0fff4227.js"><link rel="prefetch" href="/plana/assets/js/162.70526488.js"><link rel="prefetch" href="/plana/assets/js/163.faa79f0a.js"><link rel="prefetch" href="/plana/assets/js/164.9c80b5bb.js"><link rel="prefetch" href="/plana/assets/js/165.7f9b0124.js"><link rel="prefetch" href="/plana/assets/js/166.36435978.js"><link rel="prefetch" href="/plana/assets/js/167.feea7028.js"><link rel="prefetch" href="/plana/assets/js/168.cc504d5f.js"><link rel="prefetch" href="/plana/assets/js/169.ec7d4b8a.js"><link rel="prefetch" href="/plana/assets/js/17.07c08387.js"><link rel="prefetch" href="/plana/assets/js/170.a8b4b58d.js"><link rel="prefetch" href="/plana/assets/js/171.2329fa88.js"><link rel="prefetch" href="/plana/assets/js/172.286ac28f.js"><link rel="prefetch" href="/plana/assets/js/173.a692852e.js"><link rel="prefetch" href="/plana/assets/js/174.a39922f0.js"><link rel="prefetch" href="/plana/assets/js/175.b47f1b23.js"><link rel="prefetch" href="/plana/assets/js/176.86486ead.js"><link rel="prefetch" href="/plana/assets/js/177.40f1c5b7.js"><link rel="prefetch" href="/plana/assets/js/178.7a9ca10d.js"><link rel="prefetch" href="/plana/assets/js/179.19051ac2.js"><link rel="prefetch" href="/plana/assets/js/18.e433f8d3.js"><link rel="prefetch" href="/plana/assets/js/180.57d0c928.js"><link rel="prefetch" href="/plana/assets/js/181.00da0f3d.js"><link rel="prefetch" href="/plana/assets/js/182.cadb79df.js"><link rel="prefetch" href="/plana/assets/js/183.8dd3881a.js"><link rel="prefetch" href="/plana/assets/js/184.1222a110.js"><link rel="prefetch" href="/plana/assets/js/185.7d9330c8.js"><link rel="prefetch" href="/plana/assets/js/186.d6ddbb60.js"><link rel="prefetch" href="/plana/assets/js/187.f19bfcc2.js"><link rel="prefetch" href="/plana/assets/js/188.b801053a.js"><link rel="prefetch" href="/plana/assets/js/189.9bf68bd8.js"><link rel="prefetch" href="/plana/assets/js/19.0f82fe28.js"><link rel="prefetch" href="/plana/assets/js/190.158c0b50.js"><link rel="prefetch" href="/plana/assets/js/191.cdca9aef.js"><link rel="prefetch" href="/plana/assets/js/192.84164400.js"><link rel="prefetch" href="/plana/assets/js/193.6fee8315.js"><link rel="prefetch" href="/plana/assets/js/194.646a3bc9.js"><link rel="prefetch" href="/plana/assets/js/195.f63862f4.js"><link rel="prefetch" href="/plana/assets/js/196.4b0d972c.js"><link rel="prefetch" href="/plana/assets/js/197.e706ce3c.js"><link rel="prefetch" href="/plana/assets/js/198.8b9720bf.js"><link rel="prefetch" href="/plana/assets/js/199.49a5e793.js"><link rel="prefetch" href="/plana/assets/js/20.619cb712.js"><link rel="prefetch" href="/plana/assets/js/200.ef546dd9.js"><link rel="prefetch" href="/plana/assets/js/201.479054ec.js"><link rel="prefetch" href="/plana/assets/js/202.0b3389ee.js"><link rel="prefetch" href="/plana/assets/js/203.22150890.js"><link rel="prefetch" href="/plana/assets/js/204.2dc71336.js"><link rel="prefetch" href="/plana/assets/js/205.e377c245.js"><link rel="prefetch" href="/plana/assets/js/206.1ace4feb.js"><link rel="prefetch" href="/plana/assets/js/207.323fa10a.js"><link rel="prefetch" href="/plana/assets/js/208.e353a6ec.js"><link rel="prefetch" href="/plana/assets/js/209.316ac6f0.js"><link rel="prefetch" href="/plana/assets/js/21.d91a849c.js"><link rel="prefetch" href="/plana/assets/js/210.d4f18535.js"><link rel="prefetch" href="/plana/assets/js/211.573c492b.js"><link rel="prefetch" href="/plana/assets/js/212.b2a16387.js"><link rel="prefetch" href="/plana/assets/js/213.c2fac0b1.js"><link rel="prefetch" href="/plana/assets/js/214.79b62576.js"><link rel="prefetch" href="/plana/assets/js/215.fe6c3e10.js"><link rel="prefetch" href="/plana/assets/js/216.18f410e2.js"><link rel="prefetch" href="/plana/assets/js/217.20c9e9eb.js"><link rel="prefetch" href="/plana/assets/js/218.a0eeeb7c.js"><link rel="prefetch" href="/plana/assets/js/219.b956aca7.js"><link rel="prefetch" href="/plana/assets/js/22.366fc766.js"><link rel="prefetch" href="/plana/assets/js/220.5ed5e277.js"><link rel="prefetch" href="/plana/assets/js/221.468f9087.js"><link rel="prefetch" href="/plana/assets/js/222.638dc5f6.js"><link rel="prefetch" href="/plana/assets/js/223.0fad689f.js"><link rel="prefetch" href="/plana/assets/js/224.61ad16fd.js"><link rel="prefetch" href="/plana/assets/js/225.91089e6c.js"><link rel="prefetch" href="/plana/assets/js/226.2f0d158a.js"><link rel="prefetch" href="/plana/assets/js/227.43288d9d.js"><link rel="prefetch" href="/plana/assets/js/228.4bff0625.js"><link rel="prefetch" href="/plana/assets/js/229.9c3666b2.js"><link rel="prefetch" href="/plana/assets/js/23.d2ecdcc9.js"><link rel="prefetch" href="/plana/assets/js/230.b52057f9.js"><link rel="prefetch" href="/plana/assets/js/231.cc0ed124.js"><link rel="prefetch" href="/plana/assets/js/232.9ad374c5.js"><link rel="prefetch" href="/plana/assets/js/233.d794c11f.js"><link rel="prefetch" href="/plana/assets/js/234.26ac8fbc.js"><link rel="prefetch" href="/plana/assets/js/235.41250663.js"><link rel="prefetch" href="/plana/assets/js/236.881374a2.js"><link rel="prefetch" href="/plana/assets/js/237.c7bd84e0.js"><link rel="prefetch" href="/plana/assets/js/238.98726af2.js"><link rel="prefetch" href="/plana/assets/js/239.9f11e102.js"><link rel="prefetch" href="/plana/assets/js/24.02b55c75.js"><link rel="prefetch" href="/plana/assets/js/240.a7cac4ef.js"><link rel="prefetch" href="/plana/assets/js/241.462a960b.js"><link rel="prefetch" href="/plana/assets/js/242.7cf42754.js"><link rel="prefetch" href="/plana/assets/js/243.b3d1619f.js"><link rel="prefetch" href="/plana/assets/js/244.40da516b.js"><link rel="prefetch" href="/plana/assets/js/245.ada0c168.js"><link rel="prefetch" href="/plana/assets/js/246.38614800.js"><link rel="prefetch" href="/plana/assets/js/247.491612a2.js"><link rel="prefetch" href="/plana/assets/js/248.23741832.js"><link rel="prefetch" href="/plana/assets/js/249.90624a3a.js"><link rel="prefetch" href="/plana/assets/js/25.96e9e495.js"><link rel="prefetch" href="/plana/assets/js/250.f5946779.js"><link rel="prefetch" href="/plana/assets/js/251.58091edf.js"><link rel="prefetch" href="/plana/assets/js/252.fbe32ae4.js"><link rel="prefetch" href="/plana/assets/js/253.1cdd8f1c.js"><link rel="prefetch" href="/plana/assets/js/254.651e7bc6.js"><link rel="prefetch" href="/plana/assets/js/255.58aaa830.js"><link rel="prefetch" href="/plana/assets/js/256.08653b0a.js"><link rel="prefetch" href="/plana/assets/js/257.18da3dda.js"><link rel="prefetch" href="/plana/assets/js/258.e639b138.js"><link rel="prefetch" href="/plana/assets/js/259.9a2ccdd8.js"><link rel="prefetch" href="/plana/assets/js/26.786f768e.js"><link rel="prefetch" href="/plana/assets/js/260.1ffec687.js"><link rel="prefetch" href="/plana/assets/js/261.6f007b8c.js"><link rel="prefetch" href="/plana/assets/js/262.eebd1210.js"><link rel="prefetch" href="/plana/assets/js/263.1672d254.js"><link rel="prefetch" href="/plana/assets/js/264.a786f2f0.js"><link rel="prefetch" href="/plana/assets/js/265.b08f361a.js"><link rel="prefetch" href="/plana/assets/js/266.6b9c1b18.js"><link rel="prefetch" href="/plana/assets/js/267.05341052.js"><link rel="prefetch" href="/plana/assets/js/268.2b47894a.js"><link rel="prefetch" href="/plana/assets/js/269.b00e1745.js"><link rel="prefetch" href="/plana/assets/js/27.d95cd926.js"><link rel="prefetch" href="/plana/assets/js/270.f09aa40d.js"><link rel="prefetch" href="/plana/assets/js/271.036eefbf.js"><link rel="prefetch" href="/plana/assets/js/272.685451a2.js"><link rel="prefetch" href="/plana/assets/js/273.489debcf.js"><link rel="prefetch" href="/plana/assets/js/274.3f824bc5.js"><link rel="prefetch" href="/plana/assets/js/275.d3661899.js"><link rel="prefetch" href="/plana/assets/js/276.0dd18e5e.js"><link rel="prefetch" href="/plana/assets/js/277.1ec17e71.js"><link rel="prefetch" href="/plana/assets/js/278.6379871f.js"><link rel="prefetch" href="/plana/assets/js/279.a0692e92.js"><link rel="prefetch" href="/plana/assets/js/28.c63f738d.js"><link rel="prefetch" href="/plana/assets/js/280.34932565.js"><link rel="prefetch" href="/plana/assets/js/281.ae742fd5.js"><link rel="prefetch" href="/plana/assets/js/282.715175d9.js"><link rel="prefetch" href="/plana/assets/js/283.9b6a3e34.js"><link rel="prefetch" href="/plana/assets/js/284.00628265.js"><link rel="prefetch" href="/plana/assets/js/285.3de0dd73.js"><link rel="prefetch" href="/plana/assets/js/286.6a2d6c2a.js"><link rel="prefetch" href="/plana/assets/js/287.74cdf243.js"><link rel="prefetch" href="/plana/assets/js/288.42fdbe73.js"><link rel="prefetch" href="/plana/assets/js/289.f4afe8dc.js"><link rel="prefetch" href="/plana/assets/js/29.84c2f6be.js"><link rel="prefetch" href="/plana/assets/js/290.6fad3c29.js"><link rel="prefetch" href="/plana/assets/js/291.b0ad0381.js"><link rel="prefetch" href="/plana/assets/js/292.888b58ac.js"><link rel="prefetch" href="/plana/assets/js/293.1ed605a6.js"><link rel="prefetch" href="/plana/assets/js/294.3af3dec3.js"><link rel="prefetch" href="/plana/assets/js/295.db08edcf.js"><link rel="prefetch" href="/plana/assets/js/296.e4837fb2.js"><link rel="prefetch" href="/plana/assets/js/297.25eb8cb6.js"><link rel="prefetch" href="/plana/assets/js/298.4948e1d0.js"><link rel="prefetch" href="/plana/assets/js/299.56ff4927.js"><link rel="prefetch" href="/plana/assets/js/3.27803fd3.js"><link rel="prefetch" href="/plana/assets/js/30.a9337659.js"><link rel="prefetch" href="/plana/assets/js/300.8dad7bd4.js"><link rel="prefetch" href="/plana/assets/js/301.1d0bd3b7.js"><link rel="prefetch" href="/plana/assets/js/302.24c7060b.js"><link rel="prefetch" href="/plana/assets/js/303.a4a7908d.js"><link rel="prefetch" href="/plana/assets/js/304.d5a32c16.js"><link rel="prefetch" href="/plana/assets/js/305.eb22a5e4.js"><link rel="prefetch" href="/plana/assets/js/306.cdaa56b9.js"><link rel="prefetch" href="/plana/assets/js/307.f7e38353.js"><link rel="prefetch" href="/plana/assets/js/308.3f3f49e6.js"><link rel="prefetch" href="/plana/assets/js/309.ba1c34b9.js"><link rel="prefetch" href="/plana/assets/js/31.f4ff74a7.js"><link rel="prefetch" href="/plana/assets/js/310.06e88629.js"><link rel="prefetch" href="/plana/assets/js/311.7cadacd8.js"><link rel="prefetch" href="/plana/assets/js/312.36004dd0.js"><link rel="prefetch" href="/plana/assets/js/313.efb51116.js"><link rel="prefetch" href="/plana/assets/js/314.55c74d14.js"><link rel="prefetch" href="/plana/assets/js/315.fc4d91f4.js"><link rel="prefetch" href="/plana/assets/js/316.dde0feb1.js"><link rel="prefetch" href="/plana/assets/js/317.ef59c7dd.js"><link rel="prefetch" href="/plana/assets/js/318.9c8514de.js"><link rel="prefetch" href="/plana/assets/js/319.e934bf23.js"><link rel="prefetch" href="/plana/assets/js/32.611da568.js"><link rel="prefetch" href="/plana/assets/js/320.2c3bf800.js"><link rel="prefetch" href="/plana/assets/js/321.2f166a58.js"><link rel="prefetch" href="/plana/assets/js/322.2727112d.js"><link rel="prefetch" href="/plana/assets/js/323.987dae09.js"><link rel="prefetch" href="/plana/assets/js/324.059197e5.js"><link rel="prefetch" href="/plana/assets/js/325.251603a9.js"><link rel="prefetch" href="/plana/assets/js/326.b9aa9786.js"><link rel="prefetch" href="/plana/assets/js/327.83df42f2.js"><link rel="prefetch" href="/plana/assets/js/328.437841b5.js"><link rel="prefetch" href="/plana/assets/js/329.4705178f.js"><link rel="prefetch" href="/plana/assets/js/33.04179be5.js"><link rel="prefetch" href="/plana/assets/js/330.7fefbd39.js"><link rel="prefetch" href="/plana/assets/js/331.324b88a4.js"><link rel="prefetch" href="/plana/assets/js/332.9dbc0a0f.js"><link rel="prefetch" href="/plana/assets/js/333.a9f4ba89.js"><link rel="prefetch" href="/plana/assets/js/334.bfc521ff.js"><link rel="prefetch" href="/plana/assets/js/335.ea772c69.js"><link rel="prefetch" href="/plana/assets/js/336.3c139a73.js"><link rel="prefetch" href="/plana/assets/js/337.4b7b5285.js"><link rel="prefetch" href="/plana/assets/js/338.40b3bfdb.js"><link rel="prefetch" href="/plana/assets/js/339.bf0c2419.js"><link rel="prefetch" href="/plana/assets/js/34.7d7532c6.js"><link rel="prefetch" href="/plana/assets/js/340.9ceb2f7a.js"><link rel="prefetch" href="/plana/assets/js/341.bc48efb9.js"><link rel="prefetch" href="/plana/assets/js/342.75077914.js"><link rel="prefetch" href="/plana/assets/js/343.efda7d56.js"><link rel="prefetch" href="/plana/assets/js/344.31c0f3c6.js"><link rel="prefetch" href="/plana/assets/js/345.7fb06b95.js"><link rel="prefetch" href="/plana/assets/js/346.55ccf355.js"><link rel="prefetch" href="/plana/assets/js/347.98aa9eab.js"><link rel="prefetch" href="/plana/assets/js/348.878dac49.js"><link rel="prefetch" href="/plana/assets/js/349.878acfca.js"><link rel="prefetch" href="/plana/assets/js/35.a56a078a.js"><link rel="prefetch" href="/plana/assets/js/350.67d85dec.js"><link rel="prefetch" href="/plana/assets/js/351.fe864f55.js"><link rel="prefetch" href="/plana/assets/js/352.0140a20d.js"><link rel="prefetch" href="/plana/assets/js/353.1a2bdf26.js"><link rel="prefetch" href="/plana/assets/js/354.e698b263.js"><link rel="prefetch" href="/plana/assets/js/355.69178048.js"><link rel="prefetch" href="/plana/assets/js/356.13571020.js"><link rel="prefetch" href="/plana/assets/js/357.666a6e4e.js"><link rel="prefetch" href="/plana/assets/js/358.3a859aae.js"><link rel="prefetch" href="/plana/assets/js/359.e6291586.js"><link rel="prefetch" href="/plana/assets/js/36.6b2c1c06.js"><link rel="prefetch" href="/plana/assets/js/360.553be648.js"><link rel="prefetch" href="/plana/assets/js/361.f674d762.js"><link rel="prefetch" href="/plana/assets/js/362.41696f0b.js"><link rel="prefetch" href="/plana/assets/js/363.db6b18e5.js"><link rel="prefetch" href="/plana/assets/js/364.f4ef8d66.js"><link rel="prefetch" href="/plana/assets/js/366.af8be9cf.js"><link rel="prefetch" href="/plana/assets/js/367.89b9bd1a.js"><link rel="prefetch" href="/plana/assets/js/368.4a0db9f9.js"><link rel="prefetch" href="/plana/assets/js/369.0f137c05.js"><link rel="prefetch" href="/plana/assets/js/37.a372e2ff.js"><link rel="prefetch" href="/plana/assets/js/370.d0503cfb.js"><link rel="prefetch" href="/plana/assets/js/371.a5a61f6c.js"><link rel="prefetch" href="/plana/assets/js/372.a8beeec6.js"><link rel="prefetch" href="/plana/assets/js/373.52486327.js"><link rel="prefetch" href="/plana/assets/js/374.becb79ef.js"><link rel="prefetch" href="/plana/assets/js/375.adbe845a.js"><link rel="prefetch" href="/plana/assets/js/376.0b725de7.js"><link rel="prefetch" href="/plana/assets/js/377.6d0755e8.js"><link rel="prefetch" href="/plana/assets/js/378.9899dca3.js"><link rel="prefetch" href="/plana/assets/js/379.8567246b.js"><link rel="prefetch" href="/plana/assets/js/38.bf139dae.js"><link rel="prefetch" href="/plana/assets/js/380.fff3aeb0.js"><link rel="prefetch" href="/plana/assets/js/381.5d8ddb4d.js"><link rel="prefetch" href="/plana/assets/js/382.ebb79c48.js"><link rel="prefetch" href="/plana/assets/js/383.b1d8b5be.js"><link rel="prefetch" href="/plana/assets/js/384.b8ef0439.js"><link rel="prefetch" href="/plana/assets/js/385.274ad089.js"><link rel="prefetch" href="/plana/assets/js/386.8dc07401.js"><link rel="prefetch" href="/plana/assets/js/387.aea18e98.js"><link rel="prefetch" href="/plana/assets/js/388.1ef06a0b.js"><link rel="prefetch" href="/plana/assets/js/389.9d65f18d.js"><link rel="prefetch" href="/plana/assets/js/39.5a4f8e59.js"><link rel="prefetch" href="/plana/assets/js/390.6bd12dc7.js"><link rel="prefetch" href="/plana/assets/js/391.6ef66911.js"><link rel="prefetch" href="/plana/assets/js/392.ffba56bb.js"><link rel="prefetch" href="/plana/assets/js/393.a5fc8fba.js"><link rel="prefetch" href="/plana/assets/js/394.6ab7521b.js"><link rel="prefetch" href="/plana/assets/js/395.3ab7f171.js"><link rel="prefetch" href="/plana/assets/js/396.0791500c.js"><link rel="prefetch" href="/plana/assets/js/397.28bf46c8.js"><link rel="prefetch" href="/plana/assets/js/398.7807db8d.js"><link rel="prefetch" href="/plana/assets/js/399.4d403b1b.js"><link rel="prefetch" href="/plana/assets/js/4.6af04a85.js"><link rel="prefetch" href="/plana/assets/js/40.43e4b38f.js"><link rel="prefetch" href="/plana/assets/js/400.c888a05f.js"><link rel="prefetch" href="/plana/assets/js/401.6dfdc401.js"><link rel="prefetch" href="/plana/assets/js/402.2836e580.js"><link rel="prefetch" href="/plana/assets/js/403.a8ec3c75.js"><link rel="prefetch" href="/plana/assets/js/404.5858ee05.js"><link rel="prefetch" href="/plana/assets/js/405.4fd5cbce.js"><link rel="prefetch" href="/plana/assets/js/406.059c34fc.js"><link rel="prefetch" href="/plana/assets/js/407.1991324f.js"><link rel="prefetch" href="/plana/assets/js/408.57f13ab2.js"><link rel="prefetch" href="/plana/assets/js/409.b3fdbf19.js"><link rel="prefetch" href="/plana/assets/js/41.baf41ad2.js"><link rel="prefetch" href="/plana/assets/js/410.1c66b59b.js"><link rel="prefetch" href="/plana/assets/js/411.89daa103.js"><link rel="prefetch" href="/plana/assets/js/412.5fd17d05.js"><link rel="prefetch" href="/plana/assets/js/413.67df2b20.js"><link rel="prefetch" href="/plana/assets/js/414.7c1feaab.js"><link rel="prefetch" href="/plana/assets/js/415.e07db45d.js"><link rel="prefetch" href="/plana/assets/js/416.fe7e2c62.js"><link rel="prefetch" href="/plana/assets/js/417.c9f94e9c.js"><link rel="prefetch" href="/plana/assets/js/418.18704cfc.js"><link rel="prefetch" href="/plana/assets/js/419.9f113e64.js"><link rel="prefetch" href="/plana/assets/js/42.f2884796.js"><link rel="prefetch" href="/plana/assets/js/420.2a5f3a3f.js"><link rel="prefetch" href="/plana/assets/js/421.1b110d49.js"><link rel="prefetch" href="/plana/assets/js/422.b836f5a4.js"><link rel="prefetch" href="/plana/assets/js/423.9fa437af.js"><link rel="prefetch" href="/plana/assets/js/424.0fc0a623.js"><link rel="prefetch" href="/plana/assets/js/425.4bee6afc.js"><link rel="prefetch" href="/plana/assets/js/426.036d5a1b.js"><link rel="prefetch" href="/plana/assets/js/427.f2a1aa48.js"><link rel="prefetch" href="/plana/assets/js/428.fc22796c.js"><link rel="prefetch" href="/plana/assets/js/429.b6acfba5.js"><link rel="prefetch" href="/plana/assets/js/43.7aa39e52.js"><link rel="prefetch" href="/plana/assets/js/430.ed97aa43.js"><link rel="prefetch" href="/plana/assets/js/431.2fc0d4e3.js"><link rel="prefetch" href="/plana/assets/js/432.43115b63.js"><link rel="prefetch" href="/plana/assets/js/433.a1c3b83a.js"><link rel="prefetch" href="/plana/assets/js/434.ee152248.js"><link rel="prefetch" href="/plana/assets/js/435.24976c8a.js"><link rel="prefetch" href="/plana/assets/js/436.59dd1ab1.js"><link rel="prefetch" href="/plana/assets/js/437.50136991.js"><link rel="prefetch" href="/plana/assets/js/438.5eb6bf82.js"><link rel="prefetch" href="/plana/assets/js/439.9e310ae5.js"><link rel="prefetch" href="/plana/assets/js/44.ea8da77b.js"><link rel="prefetch" href="/plana/assets/js/440.2457f927.js"><link rel="prefetch" href="/plana/assets/js/441.fbc13ad6.js"><link rel="prefetch" href="/plana/assets/js/442.d130c4b3.js"><link rel="prefetch" href="/plana/assets/js/443.1f900823.js"><link rel="prefetch" href="/plana/assets/js/444.3834d598.js"><link rel="prefetch" href="/plana/assets/js/445.16932093.js"><link rel="prefetch" href="/plana/assets/js/446.24711545.js"><link rel="prefetch" href="/plana/assets/js/447.568b3f96.js"><link rel="prefetch" href="/plana/assets/js/448.8883fa0d.js"><link rel="prefetch" href="/plana/assets/js/449.f6184633.js"><link rel="prefetch" href="/plana/assets/js/45.73a9f625.js"><link rel="prefetch" href="/plana/assets/js/450.a996511c.js"><link rel="prefetch" href="/plana/assets/js/451.1b1843f7.js"><link rel="prefetch" href="/plana/assets/js/452.0be6db8b.js"><link rel="prefetch" href="/plana/assets/js/453.2c9eca27.js"><link rel="prefetch" href="/plana/assets/js/454.43d6b922.js"><link rel="prefetch" href="/plana/assets/js/455.798dc8d2.js"><link rel="prefetch" href="/plana/assets/js/456.5294aa61.js"><link rel="prefetch" href="/plana/assets/js/457.582336be.js"><link rel="prefetch" href="/plana/assets/js/458.3ae86239.js"><link rel="prefetch" href="/plana/assets/js/459.17fe935e.js"><link rel="prefetch" href="/plana/assets/js/46.6c8e3280.js"><link rel="prefetch" href="/plana/assets/js/460.e3ca3d89.js"><link rel="prefetch" href="/plana/assets/js/461.9f892ebc.js"><link rel="prefetch" href="/plana/assets/js/462.57d0ad29.js"><link rel="prefetch" href="/plana/assets/js/463.a1965841.js"><link rel="prefetch" href="/plana/assets/js/464.d0da0b56.js"><link rel="prefetch" href="/plana/assets/js/465.6cb0dd50.js"><link rel="prefetch" href="/plana/assets/js/466.272ea41f.js"><link rel="prefetch" href="/plana/assets/js/467.9c04d6bf.js"><link rel="prefetch" href="/plana/assets/js/468.b91655c9.js"><link rel="prefetch" href="/plana/assets/js/469.e4727b4f.js"><link rel="prefetch" href="/plana/assets/js/47.3909e74a.js"><link rel="prefetch" href="/plana/assets/js/470.b11beb41.js"><link rel="prefetch" href="/plana/assets/js/471.4753cb89.js"><link rel="prefetch" href="/plana/assets/js/472.29077ff8.js"><link rel="prefetch" href="/plana/assets/js/473.a653331c.js"><link rel="prefetch" href="/plana/assets/js/474.2a8fae88.js"><link rel="prefetch" href="/plana/assets/js/475.9b78390f.js"><link rel="prefetch" href="/plana/assets/js/476.9e13c339.js"><link rel="prefetch" href="/plana/assets/js/477.05a2179e.js"><link rel="prefetch" href="/plana/assets/js/478.9c4f06c9.js"><link rel="prefetch" href="/plana/assets/js/479.559e2b93.js"><link rel="prefetch" href="/plana/assets/js/48.be057863.js"><link rel="prefetch" href="/plana/assets/js/480.ec41e7ce.js"><link rel="prefetch" href="/plana/assets/js/481.113c6aa3.js"><link rel="prefetch" href="/plana/assets/js/482.40e20309.js"><link rel="prefetch" href="/plana/assets/js/483.689e3d97.js"><link rel="prefetch" href="/plana/assets/js/484.069ebf35.js"><link rel="prefetch" href="/plana/assets/js/485.9e7bd20f.js"><link rel="prefetch" href="/plana/assets/js/486.c163809d.js"><link rel="prefetch" href="/plana/assets/js/487.acdd4863.js"><link rel="prefetch" href="/plana/assets/js/488.6075f8e7.js"><link rel="prefetch" href="/plana/assets/js/489.77207a01.js"><link rel="prefetch" href="/plana/assets/js/49.64cd900d.js"><link rel="prefetch" href="/plana/assets/js/490.2bb176f4.js"><link rel="prefetch" href="/plana/assets/js/491.07e739a2.js"><link rel="prefetch" href="/plana/assets/js/492.e07a5eee.js"><link rel="prefetch" href="/plana/assets/js/493.333ffb97.js"><link rel="prefetch" href="/plana/assets/js/494.ef208677.js"><link rel="prefetch" href="/plana/assets/js/495.a1f2d8cb.js"><link rel="prefetch" href="/plana/assets/js/496.6f6a823a.js"><link rel="prefetch" href="/plana/assets/js/497.c44b60d1.js"><link rel="prefetch" href="/plana/assets/js/498.2b898143.js"><link rel="prefetch" href="/plana/assets/js/499.366c11df.js"><link rel="prefetch" href="/plana/assets/js/5.6d71262c.js"><link rel="prefetch" href="/plana/assets/js/50.b2d0e32a.js"><link rel="prefetch" href="/plana/assets/js/500.c2769d0d.js"><link rel="prefetch" href="/plana/assets/js/501.5db31a91.js"><link rel="prefetch" href="/plana/assets/js/502.6550f71c.js"><link rel="prefetch" href="/plana/assets/js/503.bcac8e8e.js"><link rel="prefetch" href="/plana/assets/js/504.defc6a0c.js"><link rel="prefetch" href="/plana/assets/js/505.6db6e3e2.js"><link rel="prefetch" href="/plana/assets/js/506.1be6db54.js"><link rel="prefetch" href="/plana/assets/js/507.e3063e28.js"><link rel="prefetch" href="/plana/assets/js/508.9fcc5bc1.js"><link rel="prefetch" href="/plana/assets/js/509.69b407c9.js"><link rel="prefetch" href="/plana/assets/js/51.98c6fcd6.js"><link rel="prefetch" href="/plana/assets/js/510.78cc9b58.js"><link rel="prefetch" href="/plana/assets/js/511.890e750c.js"><link rel="prefetch" href="/plana/assets/js/512.54f5237b.js"><link rel="prefetch" href="/plana/assets/js/513.71e81daf.js"><link rel="prefetch" href="/plana/assets/js/514.43eff2c4.js"><link rel="prefetch" href="/plana/assets/js/515.267a0ebd.js"><link rel="prefetch" href="/plana/assets/js/516.619a751e.js"><link rel="prefetch" href="/plana/assets/js/517.7e7b4f57.js"><link rel="prefetch" href="/plana/assets/js/518.4b5b069f.js"><link rel="prefetch" href="/plana/assets/js/519.cecd2dba.js"><link rel="prefetch" href="/plana/assets/js/52.51175da9.js"><link rel="prefetch" href="/plana/assets/js/520.d61eaea1.js"><link rel="prefetch" href="/plana/assets/js/521.1bdd256d.js"><link rel="prefetch" href="/plana/assets/js/522.9eb89cb1.js"><link rel="prefetch" href="/plana/assets/js/523.c21b0f67.js"><link rel="prefetch" href="/plana/assets/js/524.e8e2b891.js"><link rel="prefetch" href="/plana/assets/js/525.5d527982.js"><link rel="prefetch" href="/plana/assets/js/526.06ac5112.js"><link rel="prefetch" href="/plana/assets/js/527.9fb3036e.js"><link rel="prefetch" href="/plana/assets/js/528.fc9e2c1b.js"><link rel="prefetch" href="/plana/assets/js/529.9334c6ad.js"><link rel="prefetch" href="/plana/assets/js/53.4db53b65.js"><link rel="prefetch" href="/plana/assets/js/530.d069e448.js"><link rel="prefetch" href="/plana/assets/js/531.6b5d9a6c.js"><link rel="prefetch" href="/plana/assets/js/532.b288face.js"><link rel="prefetch" href="/plana/assets/js/533.dd36700a.js"><link rel="prefetch" href="/plana/assets/js/534.430379e3.js"><link rel="prefetch" href="/plana/assets/js/535.5b1ec919.js"><link rel="prefetch" href="/plana/assets/js/536.62d48a69.js"><link rel="prefetch" href="/plana/assets/js/537.e4ba4cc0.js"><link rel="prefetch" href="/plana/assets/js/538.2ba0b7b5.js"><link rel="prefetch" href="/plana/assets/js/539.44d94e0a.js"><link rel="prefetch" href="/plana/assets/js/54.4ecc183c.js"><link rel="prefetch" href="/plana/assets/js/540.58126542.js"><link rel="prefetch" href="/plana/assets/js/541.8a2719d4.js"><link rel="prefetch" href="/plana/assets/js/542.63823f7d.js"><link rel="prefetch" href="/plana/assets/js/543.fd601531.js"><link rel="prefetch" href="/plana/assets/js/544.c2d41a95.js"><link rel="prefetch" href="/plana/assets/js/545.c0f15057.js"><link rel="prefetch" href="/plana/assets/js/546.752d4411.js"><link rel="prefetch" href="/plana/assets/js/547.05b54675.js"><link rel="prefetch" href="/plana/assets/js/548.9c781add.js"><link rel="prefetch" href="/plana/assets/js/549.f1400ef4.js"><link rel="prefetch" href="/plana/assets/js/55.eea26142.js"><link rel="prefetch" href="/plana/assets/js/550.1c4c183f.js"><link rel="prefetch" href="/plana/assets/js/551.a6ea4558.js"><link rel="prefetch" href="/plana/assets/js/552.0d04b29e.js"><link rel="prefetch" href="/plana/assets/js/553.5c2ddf4f.js"><link rel="prefetch" href="/plana/assets/js/554.0a16293a.js"><link rel="prefetch" href="/plana/assets/js/555.015fced4.js"><link rel="prefetch" href="/plana/assets/js/556.6a698949.js"><link rel="prefetch" href="/plana/assets/js/557.fee4398a.js"><link rel="prefetch" href="/plana/assets/js/558.20023b16.js"><link rel="prefetch" href="/plana/assets/js/559.fd760ca6.js"><link rel="prefetch" href="/plana/assets/js/56.8bddb4ea.js"><link rel="prefetch" href="/plana/assets/js/560.27c09de9.js"><link rel="prefetch" href="/plana/assets/js/561.1b28b647.js"><link rel="prefetch" href="/plana/assets/js/562.de1b62da.js"><link rel="prefetch" href="/plana/assets/js/563.3e063e33.js"><link rel="prefetch" href="/plana/assets/js/564.fbdb4383.js"><link rel="prefetch" href="/plana/assets/js/565.6ac66720.js"><link rel="prefetch" href="/plana/assets/js/566.00ccbe3d.js"><link rel="prefetch" href="/plana/assets/js/567.822ff786.js"><link rel="prefetch" href="/plana/assets/js/568.2ebcf522.js"><link rel="prefetch" href="/plana/assets/js/569.ee2e3485.js"><link rel="prefetch" href="/plana/assets/js/57.ff655a80.js"><link rel="prefetch" href="/plana/assets/js/570.a9314e9d.js"><link rel="prefetch" href="/plana/assets/js/571.af242a14.js"><link rel="prefetch" href="/plana/assets/js/572.dff86d44.js"><link rel="prefetch" href="/plana/assets/js/573.060ed316.js"><link rel="prefetch" href="/plana/assets/js/574.ecea29a4.js"><link rel="prefetch" href="/plana/assets/js/575.a526b6e0.js"><link rel="prefetch" href="/plana/assets/js/576.1a856efd.js"><link rel="prefetch" href="/plana/assets/js/577.340a24d3.js"><link rel="prefetch" href="/plana/assets/js/578.1e87e5de.js"><link rel="prefetch" href="/plana/assets/js/579.ba400d0d.js"><link rel="prefetch" href="/plana/assets/js/58.6d7395ff.js"><link rel="prefetch" href="/plana/assets/js/580.8470a6ab.js"><link rel="prefetch" href="/plana/assets/js/581.24b8fa46.js"><link rel="prefetch" href="/plana/assets/js/582.11991e75.js"><link rel="prefetch" href="/plana/assets/js/583.1af0e850.js"><link rel="prefetch" href="/plana/assets/js/584.b671635d.js"><link rel="prefetch" href="/plana/assets/js/585.5ec10dae.js"><link rel="prefetch" href="/plana/assets/js/586.cf868939.js"><link rel="prefetch" href="/plana/assets/js/587.e937242b.js"><link rel="prefetch" href="/plana/assets/js/588.9993b844.js"><link rel="prefetch" href="/plana/assets/js/589.040b58f8.js"><link rel="prefetch" href="/plana/assets/js/59.d91c7a50.js"><link rel="prefetch" href="/plana/assets/js/590.7f347f61.js"><link rel="prefetch" href="/plana/assets/js/591.3acb8a8d.js"><link rel="prefetch" href="/plana/assets/js/592.c0fecc8a.js"><link rel="prefetch" href="/plana/assets/js/593.0ee76323.js"><link rel="prefetch" href="/plana/assets/js/594.7e15bb85.js"><link rel="prefetch" href="/plana/assets/js/595.b5540278.js"><link rel="prefetch" href="/plana/assets/js/596.2996c0fa.js"><link rel="prefetch" href="/plana/assets/js/597.3a3b9a07.js"><link rel="prefetch" href="/plana/assets/js/598.510c6ec5.js"><link rel="prefetch" href="/plana/assets/js/599.f7cd0ab9.js"><link rel="prefetch" href="/plana/assets/js/6.23e42cf9.js"><link rel="prefetch" href="/plana/assets/js/60.12c2a97e.js"><link rel="prefetch" href="/plana/assets/js/600.3a511d88.js"><link rel="prefetch" href="/plana/assets/js/601.1620fe4a.js"><link rel="prefetch" href="/plana/assets/js/602.92820a4e.js"><link rel="prefetch" href="/plana/assets/js/603.fa3b8f68.js"><link rel="prefetch" href="/plana/assets/js/604.a75f5d11.js"><link rel="prefetch" href="/plana/assets/js/605.6e16e44e.js"><link rel="prefetch" href="/plana/assets/js/606.3ca54f7c.js"><link rel="prefetch" href="/plana/assets/js/607.ed2521fd.js"><link rel="prefetch" href="/plana/assets/js/608.83c6a7b7.js"><link rel="prefetch" href="/plana/assets/js/609.cc5d05f6.js"><link rel="prefetch" href="/plana/assets/js/61.57554021.js"><link rel="prefetch" href="/plana/assets/js/610.e114869f.js"><link rel="prefetch" href="/plana/assets/js/611.4dfe17f1.js"><link rel="prefetch" href="/plana/assets/js/612.e9e7cdd9.js"><link rel="prefetch" href="/plana/assets/js/613.52fab004.js"><link rel="prefetch" href="/plana/assets/js/614.03e68635.js"><link rel="prefetch" href="/plana/assets/js/615.b5b202c3.js"><link rel="prefetch" href="/plana/assets/js/616.55d3ec0f.js"><link rel="prefetch" href="/plana/assets/js/617.caa80506.js"><link rel="prefetch" href="/plana/assets/js/618.97c71cdd.js"><link rel="prefetch" href="/plana/assets/js/619.506d3336.js"><link rel="prefetch" href="/plana/assets/js/62.c471c2b6.js"><link rel="prefetch" href="/plana/assets/js/620.d265d33b.js"><link rel="prefetch" href="/plana/assets/js/621.c7274a04.js"><link rel="prefetch" href="/plana/assets/js/622.78f88193.js"><link rel="prefetch" href="/plana/assets/js/623.460ecfe4.js"><link rel="prefetch" href="/plana/assets/js/624.af5db8f4.js"><link rel="prefetch" href="/plana/assets/js/625.b8b56400.js"><link rel="prefetch" href="/plana/assets/js/626.5f935139.js"><link rel="prefetch" href="/plana/assets/js/627.5eae5139.js"><link rel="prefetch" href="/plana/assets/js/628.b76c4230.js"><link rel="prefetch" href="/plana/assets/js/629.b5df5447.js"><link rel="prefetch" href="/plana/assets/js/63.a859b22b.js"><link rel="prefetch" href="/plana/assets/js/630.b4353e1e.js"><link rel="prefetch" href="/plana/assets/js/631.f52d250f.js"><link rel="prefetch" href="/plana/assets/js/632.fb3cd435.js"><link rel="prefetch" href="/plana/assets/js/633.d11743c5.js"><link rel="prefetch" href="/plana/assets/js/634.f274f0f2.js"><link rel="prefetch" href="/plana/assets/js/635.e4b93eee.js"><link rel="prefetch" href="/plana/assets/js/636.ddfe36dc.js"><link rel="prefetch" href="/plana/assets/js/637.773dfbf9.js"><link rel="prefetch" href="/plana/assets/js/638.5d3283ef.js"><link rel="prefetch" href="/plana/assets/js/639.1182aa0e.js"><link rel="prefetch" href="/plana/assets/js/64.3933d035.js"><link rel="prefetch" href="/plana/assets/js/640.fc30215e.js"><link rel="prefetch" href="/plana/assets/js/641.8fa04f8c.js"><link rel="prefetch" href="/plana/assets/js/642.9adc9013.js"><link rel="prefetch" href="/plana/assets/js/643.c553c77d.js"><link rel="prefetch" href="/plana/assets/js/644.f45f12bc.js"><link rel="prefetch" href="/plana/assets/js/645.45551213.js"><link rel="prefetch" href="/plana/assets/js/646.20f8455d.js"><link rel="prefetch" href="/plana/assets/js/647.f83d8512.js"><link rel="prefetch" href="/plana/assets/js/648.d2116c6d.js"><link rel="prefetch" href="/plana/assets/js/649.7c63bf5a.js"><link rel="prefetch" href="/plana/assets/js/65.c73421f0.js"><link rel="prefetch" href="/plana/assets/js/650.a8d4d68c.js"><link rel="prefetch" href="/plana/assets/js/651.660dc950.js"><link rel="prefetch" href="/plana/assets/js/652.e4a8d299.js"><link rel="prefetch" href="/plana/assets/js/653.d5cb1829.js"><link rel="prefetch" href="/plana/assets/js/654.06347c17.js"><link rel="prefetch" href="/plana/assets/js/655.1407708a.js"><link rel="prefetch" href="/plana/assets/js/656.c8c6bc8b.js"><link rel="prefetch" href="/plana/assets/js/657.5bfffe54.js"><link rel="prefetch" href="/plana/assets/js/658.548e92c7.js"><link rel="prefetch" href="/plana/assets/js/659.e6f86d89.js"><link rel="prefetch" href="/plana/assets/js/66.db88a898.js"><link rel="prefetch" href="/plana/assets/js/660.68b4f9c1.js"><link rel="prefetch" href="/plana/assets/js/661.7c1843eb.js"><link rel="prefetch" href="/plana/assets/js/662.fd5c9c14.js"><link rel="prefetch" href="/plana/assets/js/663.2a29079b.js"><link rel="prefetch" href="/plana/assets/js/664.f7e273fb.js"><link rel="prefetch" href="/plana/assets/js/665.92739f4f.js"><link rel="prefetch" href="/plana/assets/js/666.c9dfc4da.js"><link rel="prefetch" href="/plana/assets/js/667.e4e37653.js"><link rel="prefetch" href="/plana/assets/js/668.753f6377.js"><link rel="prefetch" href="/plana/assets/js/669.26bfae22.js"><link rel="prefetch" href="/plana/assets/js/67.ad91902f.js"><link rel="prefetch" href="/plana/assets/js/670.a70329fc.js"><link rel="prefetch" href="/plana/assets/js/671.11637c8c.js"><link rel="prefetch" href="/plana/assets/js/672.9a3410bf.js"><link rel="prefetch" href="/plana/assets/js/673.5f4041b7.js"><link rel="prefetch" href="/plana/assets/js/674.7a725878.js"><link rel="prefetch" href="/plana/assets/js/675.d55427e9.js"><link rel="prefetch" href="/plana/assets/js/676.eb15c05a.js"><link rel="prefetch" href="/plana/assets/js/677.98c18ede.js"><link rel="prefetch" href="/plana/assets/js/678.db86b061.js"><link rel="prefetch" href="/plana/assets/js/679.972243d8.js"><link rel="prefetch" href="/plana/assets/js/68.3e6dcf8f.js"><link rel="prefetch" href="/plana/assets/js/680.d9e2eba1.js"><link rel="prefetch" href="/plana/assets/js/681.8e0783ae.js"><link rel="prefetch" href="/plana/assets/js/682.a0c2e943.js"><link rel="prefetch" href="/plana/assets/js/683.d9a0e0b6.js"><link rel="prefetch" href="/plana/assets/js/684.19b16b09.js"><link rel="prefetch" href="/plana/assets/js/685.1dfde878.js"><link rel="prefetch" href="/plana/assets/js/686.5ebd864b.js"><link rel="prefetch" href="/plana/assets/js/687.9d3c3ee0.js"><link rel="prefetch" href="/plana/assets/js/688.7a8d52a4.js"><link rel="prefetch" href="/plana/assets/js/689.43733f87.js"><link rel="prefetch" href="/plana/assets/js/69.0c93e68b.js"><link rel="prefetch" href="/plana/assets/js/690.b3cc0545.js"><link rel="prefetch" href="/plana/assets/js/691.f0c9f432.js"><link rel="prefetch" href="/plana/assets/js/692.fe5d277f.js"><link rel="prefetch" href="/plana/assets/js/693.f2a5bc91.js"><link rel="prefetch" href="/plana/assets/js/694.0afc8ee3.js"><link rel="prefetch" href="/plana/assets/js/695.02d143c2.js"><link rel="prefetch" href="/plana/assets/js/696.fc35e844.js"><link rel="prefetch" href="/plana/assets/js/697.59baff52.js"><link rel="prefetch" href="/plana/assets/js/698.32395aca.js"><link rel="prefetch" href="/plana/assets/js/699.49a455e0.js"><link rel="prefetch" href="/plana/assets/js/7.4d84b003.js"><link rel="prefetch" href="/plana/assets/js/70.02b035df.js"><link rel="prefetch" href="/plana/assets/js/71.50c27702.js"><link rel="prefetch" href="/plana/assets/js/72.d0b51e9d.js"><link rel="prefetch" href="/plana/assets/js/73.88fbc437.js"><link rel="prefetch" href="/plana/assets/js/74.4323b154.js"><link rel="prefetch" href="/plana/assets/js/75.c07fede3.js"><link rel="prefetch" href="/plana/assets/js/76.d17b982e.js"><link rel="prefetch" href="/plana/assets/js/77.2c2c823d.js"><link rel="prefetch" href="/plana/assets/js/78.6339cdb8.js"><link rel="prefetch" href="/plana/assets/js/79.08610500.js"><link rel="prefetch" href="/plana/assets/js/8.28fd7fea.js"><link rel="prefetch" href="/plana/assets/js/80.fd045bb2.js"><link rel="prefetch" href="/plana/assets/js/81.c563629a.js"><link rel="prefetch" href="/plana/assets/js/82.f186782c.js"><link rel="prefetch" href="/plana/assets/js/83.5b829c7f.js"><link rel="prefetch" href="/plana/assets/js/84.0edd8a25.js"><link rel="prefetch" href="/plana/assets/js/85.cb1c8ff9.js"><link rel="prefetch" href="/plana/assets/js/86.6e0b2f9b.js"><link rel="prefetch" href="/plana/assets/js/87.36b6b2f5.js"><link rel="prefetch" href="/plana/assets/js/88.a23a2afa.js"><link rel="prefetch" href="/plana/assets/js/89.765b2b9d.js"><link rel="prefetch" href="/plana/assets/js/9.59274a6f.js"><link rel="prefetch" href="/plana/assets/js/90.a62aad9b.js"><link rel="prefetch" href="/plana/assets/js/91.96d9b5fa.js"><link rel="prefetch" href="/plana/assets/js/92.b7f7e048.js"><link rel="prefetch" href="/plana/assets/js/93.c7a06bfe.js"><link rel="prefetch" href="/plana/assets/js/94.097b631a.js"><link rel="prefetch" href="/plana/assets/js/95.cdb222d4.js"><link rel="prefetch" href="/plana/assets/js/96.5a864796.js"><link rel="prefetch" href="/plana/assets/js/97.7478b98b.js"><link rel="prefetch" href="/plana/assets/js/98.c9fff4ca.js"><link rel="prefetch" href="/plana/assets/js/99.1e106589.js">
    <link rel="stylesheet" href="/plana/assets/css/0.styles.e9cba6b3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/plana/" class="home-link router-link-active"><!----> <span class="site-name">Plana(方案A)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link router-link-active">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link router-link-active">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" aria-current="page" class="sidebar-link">README</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/01--ti-gang--qian-duan-li-dai-shen-bing-li-qi.html" class="sidebar-link">[提纲]前端历代神兵利器</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/02--she-ji-yu-yan-materials.html" class="sidebar-link">设计语言(Materials)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/03--yang-shi-ku-tailwind.html" class="sidebar-link">样式库(Tailwind)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/04--han-shu-ku-lodash.html" class="sidebar-link">函数库(Lodash)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/05--ti-gang--shu-ju-biao-dan-form-file-db-crypto.html" aria-current="page" class="active sidebar-link">[M]表单+表格+存储</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/06--ti-gang--dong-xiao-zhuang-shi-dom-anim-icon-typo.html" class="sidebar-link">[E]动画+排版+色彩</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/07--ti-gang--bu-ju-dao-hang-grid-lazyload.html" class="sidebar-link">[L]布局+导航+面板</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/08--ti-gang--ye-wu-kuo-zhan-qrcode-player.html" class="sidebar-link">[T]工具+复合+扩展</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Cmpts</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/01--an-li--biao-dan-xiao-yan-validator.html" class="sidebar-link">[案例]表单校验(Validator)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/02--an-li--jing-dian-shu-cha-jian-ztree.html" class="sidebar-link">[案例]经典树插件(zTree)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/03--an-li--qian-duan-gong-shi-ji-suan-decimal.html" class="sidebar-link">[案例]前端公式计算(decimal)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/04--an-li--hua-ci-gao-liang-bi-ji.html" class="sidebar-link">[案例]划词高亮笔记</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/01--ti-gang-jquery--cha-jian-ku-cdn.html" class="sidebar-link">[提纲]jQuery插件库(CDN)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/02--ti-gang-react--zu-jian-ku.html" class="sidebar-link">[提纲]React组件库</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/03--ti-gang-vue--zu-jian-ku.html" class="sidebar-link">[提纲]Vue组件库</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/05--fang-an--jing-dian-cha-jian--jian-rong-qian-yi-ueditor.html" class="sidebar-link">[方案]经典插件-兼容迁移(Ueditor)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Libs</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/01--an-li--biao-ge-ling-cun-weiexcel.html" class="sidebar-link">[案例]表格另存为Excel</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/02--an-li--jin-zhi-fu-zhi-xiao-shuo.html" class="sidebar-link">[案例]禁止复制小说</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/03--an-li--jin-zhi-xia-zaipdf.html" class="sidebar-link">[案例]禁止下载PDF</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/01--ti-gang--qian-duan--chang-jian-ye-wu-wen-ti.html" class="sidebar-link">[提纲]前端-常见业务问题</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/02--ti-gang--qian-duan--chang-yong-dai-ma-pian-duan.html" class="sidebar-link">[提纲]前端-常用代码片段</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Mvc</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/case/01--ji-chu-angularjs-old.html" class="sidebar-link">[基础]Angularjs</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/02--ti-gang--jing-dianmvc-backbone.html" class="sidebar-link">[提纲]经典MVC(Backbone)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/03--ti-gang--xian-daimvc-react-like.html" class="sidebar-link">[提纲]现代MVC(react-like)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/05--fang-an--neng-jian-rongie8-demvc-anujs.html" class="sidebar-link">[方案]能兼容IE8+的MVC(anujs)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/06-angular--quan-zhan-xing.html" class="sidebar-link">Angular(全栈型)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/07-omi--kua-kuang-jia.html" class="sidebar-link">omi(跨框架)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/08-svelte--yuan-sheng-ji-xian.html" class="sidebar-link">svelte(原生极限)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/09-stencil--xiao-shui.html" class="sidebar-link">stencil(胶水)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>React Vue</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/01--si-kao--qian-duan--san-da-sheng-tai-bi-jiao.html" class="sidebar-link">[思考]前端-三大生态比较</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/02--ji-chu-react.html" class="sidebar-link">[基础]React</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/03--ji-chu-vue.html" class="sidebar-link">[基础]Vue</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/04--ji-chu-react16-hooks.html" class="sidebar-link">[基础]React16+Hooks</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/05--ji-chu-vue3-composition.html" class="sidebar-link">[基础]Vue3+Composition</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/07--ti-gang-react-quan-jia-tong-router-flux-styling.html" class="sidebar-link">[提纲]React全家桶(Router+Flux+Styling)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/09--biao-zhun-react--bian-cheng-gui-fan-yu-zui-jia-shi-jian.html" class="sidebar-link">[标准]React-编程规范与最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/10--biao-zhun-vue--bian-cheng-gui-fan-yu-zui-jia-shi-jian.html" class="sidebar-link">[标准]Vue-编程规范与最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/11--biao-zhun-react-hooks-zui-jia-shi-jian.html" class="sidebar-link">[标准]React Hooks 最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/12-note-react-hooks-yuimmutable--shu-ju-liu-shi-zhan.html" class="sidebar-link">[Note]React Hooks 与 Immutable 数据流实战</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/13-note--shen-ru-qian-chureact-heredux-201704.html" class="sidebar-link">[Note]深入浅出React和Redux</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Spa</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Cmpt</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/cmpt/01--ji-chu-handlebars.html" class="sidebar-link">[基础]Handlebars</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/01--ji-chu-javascript--ying-yong-she-ji.html" class="sidebar-link">[基础]JavaScript-应用程序设计</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/02--ji-chu--dan-ye-ying-yong-spa.html" class="sidebar-link">[基础]单页面应用(SPA)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/03--mo-kuai-hua-requirejs.html" class="sidebar-link">模块化</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/04--shi-tu-yin-qing-jsx-htm.html" class="sidebar-link">视图引擎</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/05--qian-duan-lu-you-router.html" class="sidebar-link">前端路由</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/06--shu-ju-liu-yu-zhuang-tai-ji-redux.html" class="sidebar-link">数据流与状态机</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="m-表单-表格-存储"><a href="#m-表单-表格-存储" class="header-anchor">#</a> [M]表单+表格+存储</h1> <h1 id="seo-语义化"><a href="#seo-语义化" class="header-anchor">#</a> SEO 语义化</h1> <ul><li>mercury-parser
<ul><li>Extracting content from the chaos of the web</li> <li>@code <a href="https://github.com/postlight/mercury-parser" target="_blank" rel="noopener noreferrer">https://github.com/postlight/mercury-parser<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="button-按钮"><a href="#button-按钮" class="header-anchor">#</a> Button 按钮</h1> <ul><li>btn-css-generator  @deprecated
<ul><li>按钮生成</li> <li><a href="http://www.bestcssbuttongenerator.com/#/8" target="_blank" rel="noopener noreferrer">http://www.bestcssbuttongenerator.com/#/8<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="button-按钮-demo"><a href="#button-按钮-demo" class="header-anchor">#</a> Button 按钮 @demo</h1> <ul><li><a href="http://www.jq22.com/webqd1687" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1687<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.jq22.com/webqd1688" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1688<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.jq22.com/webqd114" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd114<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="form-表单"><a href="#form-表单" class="header-anchor">#</a> Form 表单</h1> <ul><li><p>final-form</p> <ul><li><a href="https://github.com/final-form/final-form" target="_blank" rel="noopener noreferrer">https://github.com/final-form/final-form<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Uniform</p> <ul><li>表单样式优化</li> <li><a href="https://github.com/AudithSoftworks/Uniform" target="_blank" rel="noopener noreferrer">https://github.com/AudithSoftworks/Uniform<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>autosize @nice</p> <ul><li>让文本域(textarea) 的高度随着文字内容的变高而变高</li> <li><a href="https://github.com/jackmoore/autosize" target="_blank" rel="noopener noreferrer">https://github.com/jackmoore/autosize<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>zxcvbn @nice @old</p> <ul><li>强弱密码检测</li> <li><a href="https://github.com/dropbox/zxcvbn" target="_blank" rel="noopener noreferrer">https://github.com/dropbox/zxcvbn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="form-表单样式优化-demo"><a href="#form-表单样式优化-demo" class="header-anchor">#</a> Form 表单样式优化 @demo</h1> <ul><li>表单美化-demo
<ul><li><a href="https://www.imooc.com/learn/42" target="_blank" rel="noopener noreferrer">https://www.imooc.com/learn/42<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="radio"><a href="#radio" class="header-anchor">#</a> Radio</h1> <p>...</p> <h1 id="checkbox"><a href="#checkbox" class="header-anchor">#</a> Checkbox</h1> <ul><li><p>icheck @nice</p> <ul><li>兼容IE8+</li> <li><a href="https://github.com/fronteed/icheck" target="_blank" rel="noopener noreferrer">https://github.com/fronteed/icheck<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jquery-labelauty</p></li></ul> <h1 id="checkbox-demo"><a href="#checkbox-demo" class="header-anchor">#</a> Checkbox @demo</h1> <ul><li><a href="http://www.jq22.com/webqd2718" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2718<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio_box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio_1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio_1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">&gt;</span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="autocomplete-自动完成"><a href="#autocomplete-自动完成" class="header-anchor">#</a> Autocomplete 自动完成</h1> <ul><li>autoComplete.js
<ul><li><a href="https://github.com/TarekRaafat/autoComplete.js" target="_blank" rel="noopener noreferrer">https://github.com/TarekRaafat/autoComplete.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>typeahead.js
<ul><li><a href="https://github.com/twitter/typeahead.js" target="_blank" rel="noopener noreferrer">https://github.com/twitter/typeahead.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>Fuse
<ul><li><a href="https://github.com/krisk/Fuse" target="_blank" rel="noopener noreferrer">https://github.com/krisk/Fuse<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>At.js
<ul><li><a href="https://github.com/ichord/At.js" target="_blank" rel="noopener noreferrer">https://github.com/ichord/At.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>bootstrap-typeahead
<ul><li><a href="https://github.com/bassjobsen/Bootstrap-3-Typeahead" target="_blank" rel="noopener noreferrer">https://github.com/bassjobsen/Bootstrap-3-Typeahead<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>awesomplete
<ul><li><a href="https://github.com/LeaVerou/awesomplete" target="_blank" rel="noopener noreferrer">https://github.com/LeaVerou/awesomplete<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="rate-星级评分-demo"><a href="#rate-星级评分-demo" class="header-anchor">#</a> Rate 星级评分 @demo</h1> <ul><li><a href="http://www.jq22.com/webqd3035" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd3035<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.jq22.com/webqd1144" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1144<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">praise</span><span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    obj<span class="token punctuation">.</span><span class="token function">prevAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'xx-star'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    obj<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'xx-star'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    obj<span class="token punctuation">.</span><span class="token function">nextAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'xx-star2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.display-star&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>num <span class="token operator">+</span> <span class="token string">'星'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="star-关注点赞-demo"><a href="#star-关注点赞-demo" class="header-anchor">#</a> Star 关注点赞 @demo</h1> <ul><li><a href="http://www.jq22.com/webqd2408" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2408<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="picker-color-拾色器"><a href="#picker-color-拾色器" class="header-anchor">#</a> Picker-Color 拾色器</h1> <ul><li><p>pickr</p> <ul><li>Supports alpha channel</li> <li><a href="https://github.com/Simonwep/pickr" target="_blank" rel="noopener noreferrer">https://github.com/Simonwep/pickr<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>colorify.js</p> <ul><li><a href="http://colorify.rocks" target="_blank" rel="noopener noreferrer">http://colorify.rocks<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>COLPICK</p> <ul><li>兼容性好</li> <li><a href="http://www.jq22.com/jquery-info367" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info367<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>colors</p> <ul><li><a href="https://github.com/mrmrs/colors" target="_blank" rel="noopener noreferrer">https://github.com/mrmrs/colors<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>color-thief</p> <ul><li>利用 javascript 和 canvas 抓取一张图片中的主要颜色</li> <li>@code <a href="https://github.com/lokesh/color-thief" target="_blank" rel="noopener noreferrer">https://github.com/lokesh/color-thief<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="transfer-穿梭框"><a href="#transfer-穿梭框" class="header-anchor">#</a> Transfer 穿梭框</h1> <h1 id="select-下拉框"><a href="#select-下拉框" class="header-anchor">#</a> Select 下拉框</h1> <ul><li><p>select2 @nice</p></li> <li><p>chosen @nice</p> <ul><li><a href="https://github.com/harvesthq/chosen" target="_blank" rel="noopener noreferrer">https://github.com/harvesthq/chosen<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>selectize-js</p> <ul><li><a href="https://www.awesomes.cn/repo/selectize/selectize-js" target="_blank" rel="noopener noreferrer">https://www.awesomes.cn/repo/selectize/selectize-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>bootstrap-select</p> <ul><li><a href="https://github.com/snapappointments/bootstrap-select" target="_blank" rel="noopener noreferrer">https://github.com/snapappointments/bootstrap-select<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Choices</p> <ul><li>原生实现</li> <li><a href="https://github.com/jshjohnson/Choices" target="_blank" rel="noopener noreferrer">https://github.com/jshjohnson/Choices<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jquery-nice-select</p> <ul><li>轻量 + 自定义dropdown</li> <li><a href="https://github.com/hernansartorio/jquery-nice-select" target="_blank" rel="noopener noreferrer">https://github.com/hernansartorio/jquery-nice-select<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcss.com/jquery-nice-select/1.1.0/css/nice-select.min.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcss.com/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></code></pre></div><ul><li>jquery.sumoselect
<ul><li>A jQuery Single/Multi Select plugin which can be used on almost any device</li></ul></li> <li>Superfish
<ul><li>It is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.</li></ul></li></ul> <h1 id="select-省市区联动"><a href="#select-省市区联动" class="header-anchor">#</a> Select 省市区联动</h1> <ul><li><p>city-picker @nice</p> <ul><li>面板点击</li> <li>@code <a href="https://github.com/tshi0912/city-picker" target="_blank" rel="noopener noreferrer">https://github.com/tshi0912/city-picker<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@demo <a href="http://www.jq22.com/jquery-info7095" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info7095<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>传统类型 @nice</p> <ul><li><a href="http://www.jq22.com/jquery-info8054" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info8054<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>同一下拉框内三次点击</p> <ul><li><a href="http://www.jq22.com/jquery-info16612" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info16612<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>全国城市三级联动</p> <ul><li><a href="http://www.jq22.com/jquery-info448" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info448<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>仿京东</p> <ul><li><a href="http://www.jq22.com/jquery-info9397" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info9397<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>较全面</p> <ul><li><a href="http://www.jq22.com/jquery-info13655" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info13655<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>字母点击</p> <ul><li>移动端</li> <li><a href="http://www.jq22.com/webqd2257" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2257<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="select-下拉框-demo"><a href="#select-下拉框-demo" class="header-anchor">#</a> Select 下拉框 @demo</h1> <ul><li>模拟下拉框
<ul><li><a href="http://www.jq22.com/webqd2375" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2375<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>可多选
<ul><li><a href="http://www.jq22.com/webqd933" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd933<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>简单自动义
<ul><li><a href="http://www.jq22.com/webqd1696" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1696<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>可编辑下拉框
<ul><li><a href="http://www.jq22.com/webqd1511" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1511<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>标签
<ul><li><a href="http://www.jq22.com/webqd462" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd462<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>css实现
<ul><li><a href="http://www.jq22.com/webqd3033" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd3033<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>形形色色的下拉菜单
<ul><li><a href="https://www.imooc.com/learn/12" target="_blank" rel="noopener noreferrer">https://www.imooc.com/learn/12<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 外面嵌套一层</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>slct<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>slct<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Choose an option</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Pure CSS</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token punctuation">.</span>nav <span class="token operator">&gt;</span> li<span class="token operator">:</span>hover <span class="token punctuation">.</span>dropdown<span class="token operator">-</span>menu <span class="token punctuation">{</span>display<span class="token operator">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div><h1 id="tag-云标签-demo"><a href="#tag-云标签-demo" class="header-anchor">#</a> Tag 云标签 @demo</h1> <ul><li><a href="http://www.jq22.com/webqd1921" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1921<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="input-tag-标签输入框"><a href="#input-tag-标签输入框" class="header-anchor">#</a> Input-Tag 标签输入框</h1> <ul><li>jquery-tags-input
<ul><li><a href="http://xoxco.com/projects/code/tagsinput/" target="_blank" rel="noopener noreferrer">http://xoxco.com/projects/code/tagsinput/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>bootstrap-tagsinput
<ul><li><a href="https://github.com/bootstrap-tagsinput/bootstrap-tagsinput" target="_blank" rel="noopener noreferrer">https://github.com/bootstrap-tagsinput/bootstrap-tagsinput<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="file-文件"><a href="#file-文件" class="header-anchor">#</a> File 文件</h1> <ul><li>FileSaver @nice
<ul><li><a href="https://github.com/eligrey/FileSaver.js" target="_blank" rel="noopener noreferrer">https://github.com/eligrey/FileSaver.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>FileAPI @nice
<ul><li>a set of javascript tools for working with files</li> <li><a href="https://github.com/mailru/FileAPI" target="_blank" rel="noopener noreferrer">https://github.com/mailru/FileAPI<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// demo</span>
<span class="token keyword">var</span> choose <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'choose'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
FileAPI<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>choose<span class="token punctuation">,</span> <span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> files <span class="token operator">=</span> FileAPI<span class="token punctuation">.</span><span class="token function">getFiles</span><span class="token punctuation">(</span>evt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Retrieve file list</span>

    FileAPI<span class="token punctuation">.</span><span class="token function">filterFiles</span><span class="token punctuation">(</span>files<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>file<span class="token punctuation">,</span> info<span class="token comment">/**Object*/</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token regex">/^image/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span>	info<span class="token punctuation">.</span>width <span class="token operator">&gt;=</span> <span class="token number">320</span> <span class="token operator">&amp;&amp;</span> info<span class="token punctuation">.</span>height <span class="token operator">&gt;=</span> <span class="token number">240</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span>	<span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>files<span class="token comment">/**Array*/</span><span class="token punctuation">,</span> rejected<span class="token comment">/**Array*/</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span> files<span class="token punctuation">.</span>length <span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// Make preview 100x100</span>
            FileAPI<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>files<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                FileAPI<span class="token punctuation">.</span><span class="token function">Image</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">preview</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> img</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    images<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// Uploading Files</span>
            FileAPI<span class="token punctuation">.</span><span class="token function">upload</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                url<span class="token operator">:</span> <span class="token string">'./ctrl.php'</span><span class="token punctuation">,</span>
                files<span class="token operator">:</span> <span class="token punctuation">{</span> images<span class="token operator">:</span> files <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token function-variable function">progress</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token function-variable function">complete</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> xhr</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>SparkMd5
<ul><li>@code <a href="https://github.com/satazor/js-spark-md5" target="_blank" rel="noopener noreferrer">https://github.com/satazor/js-spark-md5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 计算文件md5</span>
<span class="token keyword">const</span> <span class="token function-variable function">computeMD5</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> fileReader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> blobSlice <span class="token operator">=</span> <span class="token class-name">File</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>mozSlice <span class="token operator">||</span> <span class="token class-name">File</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>webkitSlice <span class="token operator">||</span> <span class="token class-name">File</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>slice
        <span class="token keyword">const</span> sparkChunkSize <span class="token operator">=</span> <span class="token number">5242880</span>
        <span class="token keyword">const</span> sparkChunks <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>sourceFile<span class="token punctuation">.</span>size <span class="token operator">/</span> sparkChunkSize<span class="token punctuation">)</span>
        <span class="token keyword">let</span> currentChunk <span class="token operator">=</span> <span class="token number">0</span>
        fileReader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> spark <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SparkMd5<span class="token punctuation">.</span>ArrayBuffer</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            file<span class="token punctuation">.</span>progressMD5 <span class="token operator">=</span> <span class="token punctuation">(</span>currentChunk <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> sparkChunks <span class="token operator">*</span> <span class="token number">100</span>
            spark<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>result<span class="token punctuation">)</span>
            currentChunk<span class="token operator">++</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>currentChunk <span class="token operator">&lt;</span> sparkChunks<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">loadNext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token constant">MD5</span><span class="token operator">:</span> spark<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">const</span> <span class="token function-variable function">loadNext</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> start <span class="token operator">=</span> currentChunk <span class="token operator">*</span> sparkChunkSize
            <span class="token keyword">const</span> end <span class="token operator">=</span> start <span class="token operator">+</span> sparkChunkSize <span class="token operator">&gt;=</span> file<span class="token punctuation">.</span>sourceFile<span class="token punctuation">.</span>size <span class="token operator">?</span> file<span class="token punctuation">.</span>sourceFile<span class="token punctuation">.</span>size <span class="token operator">:</span> start <span class="token operator">+</span> sparkChunkSize
            fileReader<span class="token punctuation">.</span><span class="token function">readAsArrayBuffer</span><span class="token punctuation">(</span><span class="token function">blobSlice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>sourceFile<span class="token punctuation">,</span> start<span class="token punctuation">,</span> end<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token function">loadNext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>StreamSaver.js @nice
<ul><li>StreamSaver writes stream to the filesystem directly asynchronous</li> <li>直接将流保存成文件</li> <li>完全不兼容IE</li> <li>@code <a href="https://github.com/jimmywarting/StreamSaver.js" target="_blank" rel="noopener noreferrer">https://github.com/jimmywarting/StreamSaver.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="upload-上传"><a href="#upload-上传" class="header-anchor">#</a> Upload 上传</h1> <ul><li>uppy @nice
<ul><li><a href="https://github.com/transloadit/uppy" target="_blank" rel="noopener noreferrer">https://github.com/transloadit/uppy<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>The next open source file uploader for web browsers</li></ul></li> <li>dropzone
<ul><li>@code <a href="https://github.com/enyo/dropzone" target="_blank" rel="noopener noreferrer">https://github.com/enyo/dropzone<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>filepond
<ul><li>@code <a href="https://github.com/pqina/filepond" target="_blank" rel="noopener noreferrer">https://github.com/pqina/filepond<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="upload-classic-经典"><a href="#upload-classic-经典" class="header-anchor">#</a> Upload-Classic 经典</h1> <ul><li><p>fex webuploader @nice</p> <ul><li>兼容性好 IE6+</li> <li><a href="https://github.com/fex-team/webuploader" target="_blank" rel="noopener noreferrer">https://github.com/fex-team/webuploader<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://fex.baidu.com/webuploader/" target="_blank" rel="noopener noreferrer">http://fex.baidu.com/webuploader/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jQuery-File-Upload</p> <ul><li>兼容性好 IE6+</li> <li>@code <a href="https://github.com/blueimp/jQuery-File-Upload" target="_blank" rel="noopener noreferrer">https://github.com/blueimp/jQuery-File-Upload<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@demo <a href="https://blueimp.github.io/jQuery-File-Upload/" target="_blank" rel="noopener noreferrer">https://blueimp.github.io/jQuery-File-Upload/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="upload-deprecated"><a href="#upload-deprecated" class="header-anchor">#</a> Upload @deprecated</h1> <ul><li><p>fine-uploader @archived @old</p> <ul><li>@code <a href="https://github.com/FineUploader/fine-uploader" target="_blank" rel="noopener noreferrer">https://github.com/FineUploader/fine-uploader<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Uploadify @old @deprecated</p> <ul><li>无刷新上传</li> <li>不支持新版本chrome</li></ul></li></ul> <h1 id="upload-上传-demo"><a href="#upload-上传-demo" class="header-anchor">#</a> Upload 上传 @demo</h1> <ul><li>转base64显示
<ul><li><a href="http://www.jq22.com/webqd2806" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2806<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>使用ie滤镜实现ie低版本图片预览功能
<ul><li><a href="http://www.jq22.com/webqd2344" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2344<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>剪裁
<ul><li><a href="http://www.jq22.com/webqd1198" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1198<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> _URL <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span> <span class="token operator">||</span> window<span class="token punctuation">.</span>webkitURL<span class="token punctuation">;</span>
    <span class="token keyword">var</span> file<span class="token punctuation">,</span> img<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>file <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        img <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        img<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.img'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>src<span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
        img<span class="token punctuation">.</span>src <span class="token operator">=</span> _URL<span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>FileReader<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> _file <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>_file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        preImg<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="search-搜索"><a href="#search-搜索" class="header-anchor">#</a> Search 搜索</h1> <ul><li><p>fuse.js @nice</p> <ul><li><code>模糊搜索</code></li> <li>@code <a href="https://github.com/krisk/fuse/" target="_blank" rel="noopener noreferrer">https://github.com/krisk/fuse/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="https://fusejs.io/" target="_blank" rel="noopener noreferrer">https://fusejs.io/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>list.js @nice</p> <ul><li>@code <a href="https://github.com/javve/list.js" target="_blank" rel="noopener noreferrer">https://github.com/javve/list.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>The perfect library <span class="token keyword">for</span> adding search<span class="token punctuation">,</span> sort<span class="token punctuation">,</span> filters and flexibility to 
tables<span class="token punctuation">,</span> lists and various <span class="token constant">HTML</span> elements<span class="token punctuation">.</span> 
Built to be invisible and work on existing <span class="token constant">HTML</span><span class="token punctuation">.</span>
</code></pre></div><h1 id="search-搜索-demo"><a href="#search-搜索-demo" class="header-anchor">#</a> Search 搜索 @demo</h1> <ul><li>百度搜索结果
<ul><li><a href="http://www.jq22.com/webqd2961" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2961<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>豆瓣图书搜索功能
<ul><li><a href="http://www.jq22.com/webqd2702" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2702<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>css设计漂亮的搜索框 @simple
<ul><li><a href="http://www.jq22.com/webqd1354" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1354<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
需求:
1.找到文本框，在文本框中输入的字符会出现再搜索信息框中
2.键盘事件
3.如何拿到百度关键字的数据
后台传输    AJAX    jsonp    数据渲染
*/</span>
<span class="token keyword">var</span> oText <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;text&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> oSea <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">&quot;search&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//class是集合，要获取下标</span>
<span class="token keyword">var</span> oUl <span class="token operator">=</span> oSea<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
oText<span class="token punctuation">.</span><span class="token function-variable function">onkeyup</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> val <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token comment">/*            if(val){
                    oSea.style.display = &quot;block&quot;;
                }else{
                    oSea.style.display = &quot;none&quot;;                
                }*/</span>
    <span class="token comment">//三目运算</span>
    oSea<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> val <span class="token operator">?</span> <span class="token string">&quot;block&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> os <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;script&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    os<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&quot;</span> <span class="token operator">+</span> val <span class="token operator">+</span> <span class="token string">&quot;&amp;cb=xiaolong&amp;_=1499584946110&quot;</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>os<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//当前节点中添加一个子节点</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">xiaolong</span><span class="token punctuation">(</span><span class="token parameter">json</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    oUl<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    json<span class="token punctuation">.</span>s<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> oLi <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        oLi<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">&quot;&lt;a href='https:www.baidu.com/s?wd=&quot;</span> <span class="token operator">+</span> data <span class="token operator">+</span> <span class="token string">&quot;'&gt;&quot;</span> <span class="token operator">+</span> data <span class="token operator">+</span> <span class="token string">&quot;&lt;/a&gt;&quot;</span><span class="token punctuation">;</span>
        oUl<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oLi<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//数组专门遍历</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="hightlight-高亮"><a href="#hightlight-高亮" class="header-anchor">#</a> Hightlight 高亮</h1> <ul><li><p>mark.js</p> <ul><li>正则高亮</li> <li>@code <a href="https://github.com/julmot/mark.js/" target="_blank" rel="noopener noreferrer">https://github.com/julmot/mark.js/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="form-表单提交解析"><a href="#form-表单提交解析" class="header-anchor">#</a> Form 表单提交解析</h1> <ul><li>jquery-form
<ul><li><a href="https://github.com/jquery-form/form" target="_blank" rel="noopener noreferrer">https://github.com/jquery-form/form<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>ajaxForm</li> <li>ajaxSubmit</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// jquery-form栗子</span>
<span class="token comment">// https://www.cnblogs.com/liuhongfeng/p/5149419.html</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> title <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'inpur[name=title]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            content <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ajaxSubmit</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token comment">// 提交方式 get/post</span>
            url<span class="token operator">:</span> <span class="token string">'your url'</span><span class="token punctuation">,</span> <span class="token comment">// 需要提交的 url</span>
            data<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token string">'title'</span><span class="token operator">:</span> title<span class="token punctuation">,</span>
                <span class="token string">'content'</span><span class="token operator">:</span> content
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// data 保存提交后返回的数据，一般为 json 数据</span>
                <span class="token comment">// 此处可对 data 作相关处理</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'提交成功！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">resetForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 提交后重置表单</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// 阻止表单自动提交事件</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#myFormId'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clearForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#myFormId .specialFields'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clearFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#myFormId'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">resetForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> value <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#myFormId :password'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fieldValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> queryString <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#myFormId .specialFields'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fieldSerialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h1 id="validate-验证块-demo"><a href="#validate-验证块-demo" class="header-anchor">#</a> Validate 验证块 @demo</h1> <ul><li>滑动验证 <a href="http://www.jq22.com/webqd2853" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2853<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>简单滑动验证 <a href="http://www.jq22.com/webqd1933" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1933<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">slide</span><span class="token punctuation">(</span><span class="token parameter">range<span class="token punctuation">,</span> conSlide<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">var</span> rangeValue<span class="token punctuation">;</span>
     <span class="token keyword">var</span> flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span>obj<span class="token punctuation">.</span>max<span class="token punctuation">)</span> <span class="token punctuation">{</span>
         range<span class="token punctuation">.</span>max <span class="token operator">=</span> obj<span class="token punctuation">.</span>max<span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     range<span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
             range<span class="token punctuation">.</span><span class="token function-variable function">onmousemove</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 rangeValue <span class="token operator">=</span> range<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                 conSlide<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> rangeValue <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span><span class="token punctuation">;</span>
             <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>

     range<span class="token punctuation">.</span><span class="token function-variable function">onmouseup</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
         range<span class="token punctuation">.</span>onmousemove <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>obj<span class="token punctuation">.</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">if</span> <span class="token punctuation">(</span>rangeValue <span class="token operator">&gt;=</span> <span class="token punctuation">(</span><span class="token number">232</span> <span class="token operator">-</span> obj<span class="token punctuation">.</span>err<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> rangeValue <span class="token operator">&lt;=</span> <span class="token punctuation">(</span><span class="token number">232</span> <span class="token operator">+</span> obj<span class="token punctuation">.</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;验证成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
             <span class="token punctuation">}</span>
         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
             <span class="token keyword">if</span> <span class="token punctuation">(</span>rangeValue <span class="token operator">&gt;=</span> <span class="token number">227</span> <span class="token operator">&amp;&amp;</span> rangeValue <span class="token operator">&lt;=</span> <span class="token number">237</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;验证成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
             <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>

         conSlide<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token string">&quot;0px&quot;</span><span class="token punctuation">;</span>
         range<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
</code></pre></div><hr> <h1 id="url-操作库"><a href="#url-操作库" class="header-anchor">#</a> URL 操作库</h1> <ul><li>URI.js
<ul><li>uri操作</li> <li><a href="https://github.com/medialize/URI.js/" target="_blank" rel="noopener noreferrer">https://github.com/medialize/URI.js/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>domurl
<ul><li><a href="https://github.com/Mikhus/domurl" target="_blank" rel="noopener noreferrer">https://github.com/Mikhus/domurl<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="数据处理"><a href="#数据处理" class="header-anchor">#</a> 数据处理</h1> <ul><li>nanoid @nice
<ul><li>唯一ID生成</li> <li><a href="https://github.com/ai/nanoid" target="_blank" rel="noopener noreferrer">https://github.com/ai/nanoid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>chancejs
<ul><li>生成随机数</li> <li><a href="https://github.com/chancejs/chancejs" target="_blank" rel="noopener noreferrer">https://github.com/chancejs/chancejs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><code>js-base64</code> <ul><li>@code <a href="https://github.com/dankogai/js-base64" target="_blank" rel="noopener noreferrer">https://github.com/dankogai/js-base64<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="picker-date-时间日期选择器"><a href="#picker-date-时间日期选择器" class="header-anchor">#</a> Picker-Date 时间日期选择器</h1> <ul><li><p><code>my97</code> @nice @old @ugly</p> <ul><li>经典插件 功能多 --&gt; 长得丑 --&gt; 使用twoer皮肤</li> <li>@intro http://www.my97.net/</li> <li>@doc <a href="http://www.my97.net/demo/index.htm" target="_blank" rel="noopener noreferrer">http://www.my97.net/demo/index.htm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>bootstrap-datepicker @nice</p> <ul><li><a href="https://github.com/uxsolutions/bootstrap-datepicker" target="_blank" rel="noopener noreferrer">https://github.com/uxsolutions/bootstrap-datepicker<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>bootstrap-datetimepicker</p> <ul><li><a href="https://github.com/Eonasdan/bootstrap-datetimepicker" target="_blank" rel="noopener noreferrer">https://github.com/Eonasdan/bootstrap-datetimepicker<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>bootstrap-daterangepicker</p> <ul><li><a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank" rel="noopener noreferrer">https://github.com/dangrossman/bootstrap-daterangepicker<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>flatpickr</p> <ul><li><a href="https://github.com/chmln/flatpickr" target="_blank" rel="noopener noreferrer">https://github.com/chmln/flatpickr<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>pickadate.js</p> <ul><li>IE8+ @nice</li> <li>老外审美</li> <li><a href="https://github.com/amsul/pickadate.js" target="_blank" rel="noopener noreferrer">https://github.com/amsul/pickadate.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="calendar"><a href="#calendar" class="header-anchor">#</a> Calendar</h1> <ul><li>tui.calendar @nice
<ul><li>IE9+</li> <li><a href="https://github.com/nhnent/tui.calendar" target="_blank" rel="noopener noreferrer">https://github.com/nhnent/tui.calendar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>fullcalender @nice</li> <li>LunarCalendar
<ul><li>农历</li> <li><a href="https://github.com/zzyss86/LunarCalendar" target="_blank" rel="noopener noreferrer">https://github.com/zzyss86/LunarCalendar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="calendar-日历-demo"><a href="#calendar-日历-demo" class="header-anchor">#</a> Calendar 日历 @demo</h1> <ul><li>日历一览
<ul><li><a href="http://www.jq22.com/webqd2183" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2183<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="time-时间库"><a href="#time-时间库" class="header-anchor">#</a> Time 时间库</h1> <ul><li><p>moment.js @nice</p></li> <li><p>day.js @nice</p> <ul><li>moment.js的轻量替换</li></ul></li> <li><p>spacetime</p> <ul><li>轻量级时区库</li> <li><a href="https://github.com/spencermountain/spacetime" target="_blank" rel="noopener noreferrer">https://github.com/spencermountain/spacetime<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>date-fns @nice</p> <ul><li>Modern JavaScript date utility library</li> <li><a href="https://github.com/date-fns/date-fns" target="_blank" rel="noopener noreferrer">https://github.com/date-fns/date-fns<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Datejs</p> <ul><li>时间日期处理</li> <li><a href="https://github.com/datejs/Datejs" target="_blank" rel="noopener noreferrer">https://github.com/datejs/Datejs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>luxon @nice</p> <ul><li><a href="https://github.com/moment/luxon" target="_blank" rel="noopener noreferrer">https://github.com/moment/luxon<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>周显示</p> <ul><li><a href="http://www.jq22.com/webqd2426" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2426<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Date</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">Format</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">fmt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;M+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//月份</span>
        <span class="token string">&quot;d+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//日</span>
        <span class="token string">&quot;h+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">12</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token number">12</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token comment">//小时</span>
        <span class="token string">&quot;H+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//小时</span>
        <span class="token string">&quot;m+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//分</span>
        <span class="token string">&quot;s+&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//秒</span>
        <span class="token string">&quot;S&quot;</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMilliseconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//毫秒</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">//周</span>
    <span class="token keyword">var</span> week <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;0&quot;</span><span class="token operator">:</span> <span class="token string">&quot;日&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;1&quot;</span><span class="token operator">:</span> <span class="token string">&quot;一&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;2&quot;</span><span class="token operator">:</span> <span class="token string">&quot;二&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;3&quot;</span><span class="token operator">:</span> <span class="token string">&quot;三&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;4&quot;</span><span class="token operator">:</span> <span class="token string">&quot;四&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;5&quot;</span><span class="token operator">:</span> <span class="token string">&quot;五&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;6&quot;</span><span class="token operator">:</span> <span class="token string">&quot;六&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">//季度</span>
    <span class="token keyword">var</span> quarter <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;1&quot;</span><span class="token operator">:</span> <span class="token string">&quot;一&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;2&quot;</span><span class="token operator">:</span> <span class="token string">&quot;二&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;3&quot;</span><span class="token operator">:</span> <span class="token string">&quot;三&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;4&quot;</span><span class="token operator">:</span> <span class="token string">&quot;四&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/(y+)/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">4</span> <span class="token operator">-</span> RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/(E+)/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span>length <span class="token operator">&gt;</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token string">&quot;星期&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;周&quot;</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> week<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/(q+)/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">&quot;第&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token operator">+</span> quarter<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">&quot;季度&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token keyword">in</span> o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;(&quot;</span> <span class="token operator">+</span> j <span class="token operator">+</span> <span class="token string">&quot;)&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fmt<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            fmt <span class="token operator">=</span> fmt<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span>length <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">(</span>o<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">&quot;00&quot;</span> <span class="token operator">+</span> o<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">+</span> o<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> fmt<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Format</span><span class="token punctuation">(</span><span class="token string">&quot;yyyy-MM-dd E HH:mm:ss&quot;</span><span class="token punctuation">)</span>
</code></pre></div><h1 id="timeline-时间轴"><a href="#timeline-时间轴" class="header-anchor">#</a> Timeline 时间轴</h1> <ul><li>TimelineJS
<ul><li><a href="https://github.com/NUKnightLab/TimelineJS" target="_blank" rel="noopener noreferrer">https://github.com/NUKnightLab/TimelineJS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="template-模板引擎-渲染引擎"><a href="#template-模板引擎-渲染引擎" class="header-anchor">#</a> Template 模板引擎 | 渲染引擎</h1> <p>-&gt;&gt;</p> <h1 id="crypto-加密处理"><a href="#crypto-加密处理" class="header-anchor">#</a> Crypto 加密处理</h1> <ul><li><p><code>sjcl</code> @nice</p> <ul><li>@from 斯坦福大学</li> <li>JavaScript 加密库</li> <li>@code <a href="https://github.com/bitwiseshiftleft/sjcl/" target="_blank" rel="noopener noreferrer">https://github.com/bitwiseshiftleft/sjcl/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>jsencrypt</code> @nice</p> <ul><li>A Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.</li> <li>@code <a href="https://github.com/travist/jsencrypt" target="_blank" rel="noopener noreferrer">https://github.com/travist/jsencrypt<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>JavaScript-MD5</p> <ul><li>@code <a href="https://github.com/blueimp/JavaScript-MD5" target="_blank" rel="noopener noreferrer">https://github.com/blueimp/JavaScript-MD5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>md5.js</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">&quot;md5js&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^1.0.7&quot;</span>

<span class="token function">md5</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>loginForm<span class="token punctuation">.</span>password<span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre></div><ul><li>ccxt
<ul><li>A JavaScript / Python / PHP cryptocurrency trading library with support for more than 90 bitcoin/altcoin exchanges</li> <li>@code <a href="https://github.com/ccxt/ccxt" target="_blank" rel="noopener noreferrer">https://github.com/ccxt/ccxt<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="crypto-加密处理-other"><a href="#crypto-加密处理-other" class="header-anchor">#</a> Crypto 加密处理 @other</h1> <ul><li>jquery-md5 @deprecated</li></ul> <h1 id="crypto-加密处理-demo"><a href="#crypto-加密处理-demo" class="header-anchor">#</a> Crypto 加密处理 @demo</h1> <ul><li><a href="http://www.jq22.com/webqd1506" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1506<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="authority-权限"><a href="#authority-权限" class="header-anchor">#</a> Authority 权限</h1> <p>-&gt;&gt; 权限颗粒</p> <h1 id="fetch-数据请求"><a href="#fetch-数据请求" class="header-anchor">#</a> Fetch 数据请求</h1> <p>-&gt;&gt;</p> <h1 id="progress-进度条"><a href="#progress-进度条" class="header-anchor">#</a> Progress 进度条</h1> <ul><li>nprogress @nice @old
<ul><li><a href="https://github.com/rstacruz/nprogress" target="_blank" rel="noopener noreferrer">https://github.com/rstacruz/nprogress<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>pace
<ul><li><a href="https://github.com/HubSpot/pace" target="_blank" rel="noopener noreferrer">https://github.com/HubSpot/pace<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>progressbar.js
<ul><li><a href="https://github.com/kimmobrunfeldt/progressbar.js" target="_blank" rel="noopener noreferrer">https://github.com/kimmobrunfeldt/progressbar.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="progress-进度条-demo"><a href="#progress-进度条-demo" class="header-anchor">#</a> Progress 进度条 @demo</h1> <ul><li>css3进度条
<ul><li><a href="http://www.jq22.com/webqd1913" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1913<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>css3进度条
<ul><li><a href="http://www.jq22.com/webqd1062" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1062<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="number-数学运算"><a href="#number-数学运算" class="header-anchor">#</a> Number 数学运算</h1> <ul><li><p>Numeral-js @nice @old</p> <ul><li>@code <a href="https://github.com/adamwdraper/Numeral-js" target="_blank" rel="noopener noreferrer">https://github.com/adamwdraper/Numeral-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">http://numeraljs.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>accounting.js</p> <ul><li><a href="https://github.com/wjcrowcroft/accounting.js" target="_blank" rel="noopener noreferrer">https://github.com/wjcrowcroft/accounting.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>money.js</p> <ul><li>货币转换库</li> <li><a href="https://github.com/wjcrowcroft/money.js" target="_blank" rel="noopener noreferrer">https://github.com/wjcrowcroft/money.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Fraction.js</p> <ul><li><a href="https://github.com/infusion/Fraction.js" target="_blank" rel="noopener noreferrer">https://github.com/infusion/Fraction.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Complex.js</p> <ul><li>复数项</li> <li><a href="https://github.com/infusion/Complex.js" target="_blank" rel="noopener noreferrer">https://github.com/infusion/Complex.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>多项式</p> <ul><li><a href="https://github.com/infusion/Polynomial.js" target="_blank" rel="noopener noreferrer">https://github.com/infusion/Polynomial.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="validate-表单校验"><a href="#validate-表单校验" class="header-anchor">#</a> Validate 表单校验</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 实现</span>

用户编辑后离开前的保存校验 
检验是否修改过
</code></pre></div><ul><li>jquery-validation
<ul><li>@code <a href="https://github.com/jquery-validation/jquery-validation" target="_blank" rel="noopener noreferrer">https://github.com/jquery-validation/jquery-validation<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token punctuation">.</span>validator<span class="token punctuation">.</span><span class="token function">addMethod</span><span class="token punctuation">(</span><span class="token string">&quot;if_engineer_required&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> isEngineer <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;input[name='IsEngineer']:checked&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 选择造价师但为空 false || false</span>
    <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">(</span>isEngineer <span class="token operator">!=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">&quot;请输入证书号！&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#RegisterForm&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    rules<span class="token operator">:</span> <span class="token punctuation">{</span>
        TrueName<span class="token operator">:</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
        CertificateNumber<span class="token operator">:</span> <span class="token string">&quot;if_engineer_required&quot;</span><span class="token punctuation">,</span>
        CompanyName<span class="token operator">:</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
        UserName<span class="token operator">:</span> <span class="token punctuation">{</span>
            required<span class="token operator">:</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
            isMobile<span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//Address: 'required',</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    messages<span class="token operator">:</span> <span class="token punctuation">{</span>
        TruePassword<span class="token operator">:</span> <span class="token punctuation">{</span>
            equalTo<span class="token operator">:</span> <span class="token string">'密码输入不一致'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        CertificateNumber<span class="token operator">:</span> <span class="token string">'请输入证书号'</span><span class="token punctuation">,</span>
        Address<span class="token operator">:</span> <span class="token string">&quot;请填写详细地址&quot;</span><span class="token punctuation">,</span>
        CompanyName<span class="token operator">:</span> <span class="token string">'请输入公司名称'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// @fix</span>
    <span class="token comment">// jQuery validate验证隐藏表单(hidden)域 </span>
    <span class="token comment">// https://blog.csdn.net/qq_32786873/article/details/51460740</span>
    <span class="token comment">// ignore: &quot;&quot;,</span>
    onkeyup<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token function-variable function">errorPlacement</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">invalidHandler</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">form<span class="token punctuation">,</span>validator</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> len <span class="token operator">=</span> validator<span class="token punctuation">.</span>errorList<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>len<span class="token operator">&gt;</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> $err <span class="token operator">=</span> validator<span class="token punctuation">.</span>errorList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            layer<span class="token punctuation">.</span><span class="token function">tips</span><span class="token punctuation">(</span>$err<span class="token punctuation">.</span>message<span class="token punctuation">,</span>
                $err<span class="token punctuation">.</span>element<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                    time<span class="token operator">:</span> <span class="token number">2000</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//submitHandler: function (form) {</span>
    <span class="token comment">//    //console.log('0');</span>
    <span class="token comment">//    form.submit();</span>
    <span class="token comment">//}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>Parsley.js</p> <ul><li>@code <a href="https://github.com/guillaumepotier/Parsley.js" target="_blank" rel="noopener noreferrer">https://github.com/guillaumepotier/Parsley.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>validator.js</p> <ul><li>String validation</li> <li>@code <a href="https://github.com/chriso/validator.js" target="_blank" rel="noopener noreferrer">https://github.com/chriso/validator.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 提供了常用的校验方法 </span>
@eg  isAlpha isBase64 isEmail
</code></pre></div><ul><li>validator.js
<ul><li>支持UMD 轻量</li> <li>@code <a href="https://github.com/jaywcjlove/validator.js" target="_blank" rel="noopener noreferrer">https://github.com/jaywcjlove/validator.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>v8n
<ul><li>常用校验 + 链式</li> <li>@code <a href="https://github.com/imbrn/v8n" target="_blank" rel="noopener noreferrer">https://github.com/imbrn/v8n<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="formatter-格式处理"><a href="#formatter-格式处理" class="header-anchor">#</a> Formatter 格式处理</h1> <ul><li><p>normalizr(json) @nice</p> <ul><li><a href="https://github.com/paularmstrong/normalizr" target="_blank" rel="noopener noreferrer">https://github.com/paularmstrong/normalizr<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>text-mask @nice</p> <ul><li>表单输入格式化</li> <li>for React, Angular, Ember, Vue, &amp; plain JavaScript  @nice</li> <li>@code <a href="https://github.com/text-mask/text-mask" target="_blank" rel="noopener noreferrer">https://github.com/text-mask/text-mask<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@demo <a href="https://text-mask.github.io/text-mask/" target="_blank" rel="noopener noreferrer">https://text-mask.github.io/text-mask/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>card</p> <ul><li>银行卡格式化</li> <li>@code <a href="https://github.com/jessepollak/card" target="_blank" rel="noopener noreferrer">https://github.com/jessepollak/card<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>cleave.js</p> <ul><li><a href="https://github.com/nosir/cleave.js" target="_blank" rel="noopener noreferrer">https://github.com/nosir/cleave.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Format input text content when you are typing...</li></ul></li> <li><p>mailcheck</p> <ul><li>邮箱格式校验</li> <li>@code <a href="https://github.com/mailcheck/mailcheck" target="_blank" rel="noopener noreferrer">https://github.com/mailcheck/mailcheck<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Reduce misspelled email addresses in your web apps</li></ul></li> <li><p>currency.js @nice</p> <ul><li>货币处理</li></ul></li></ul> <h1 id="formatter-格式转化-demo"><a href="#formatter-格式转化-demo" class="header-anchor">#</a> Formatter 格式转化 @demo</h1> <ul><li>js数字金额大写转换
<ul><li><a href="http://www.jq22.com/webqd3030" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd3030<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.jq22.com/webqd1708" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1708<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="type-类型校验"><a href="#type-类型校验" class="header-anchor">#</a> Type 类型校验</h1> <ul><li><p>superstruct</p> <ul><li><a href="https://github.com/ianstormtaylor/superstruct" target="_blank" rel="noopener noreferrer">https://github.com/ianstormtaylor/superstruct<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>A simple and composable way to validate data in Javascript.</li></ul></li> <li><p>immutable-js @nice</p> <ul><li><a href="https://github.com/facebook/immutable-js" target="_blank" rel="noopener noreferrer">https://github.com/facebook/immutable-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> Map <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'immutable'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> map1 <span class="token operator">=</span> <span class="token function">Map</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> map2 <span class="token operator">=</span> map1<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span>
map1<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot; vs. &quot;</span> <span class="token operator">+</span> map2<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">// 2 vs. 50</span>
</code></pre></div><ul><li>js-model @minor
<ul><li><a href="https://github.com/benpickles/js-model" target="_blank" rel="noopener noreferrer">https://github.com/benpickles/js-model<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="watch-监控"><a href="#watch-监控" class="header-anchor">#</a> Watch 监控</h1> <ul><li>Watch.JS
<ul><li>监视对象或属性的变化</li> <li><a href="https://github.com/melanke/Watch.JS" target="_blank" rel="noopener noreferrer">https://github.com/melanke/Watch.JS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-数据表格"><a href="#table-数据表格" class="header-anchor">#</a> Table 数据表格</h1> <ul><li><p><code>gridjs</code> @nice</p> <ul><li>通用支持</li> <li><a href="https://github.com/grid-js/gridjs" target="_blank" rel="noopener noreferrer">https://github.com/grid-js/gridjs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>layui table</code> @nice</p> <ul><li>大部分功能IE8+ @nice</li> <li>横向拉伸 @nice -&gt; 所以需要换行显示的话 @deprecated</li> <li>支持导出csv excel @nice</li> <li>自带打印 @nice</li> <li>可以选择显示的列 @nice</li> <li>单元格编辑还没有支持...</li> <li>折叠 =&gt; treeGrid需要插件</li> <li><a href="https://www.layui.com/doc/modules/table.html" target="_blank" rel="noopener noreferrer">https://www.layui.com/doc/modules/table.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Layui Table </span>
<span class="token comment">// https://github.com/sentsin/layui/blob/master/src/lay/modules/table.js</span>
</code></pre></div><ul><li><code>bootstrap-table</code> @nice @old
<ul><li>写法参考guns的封装</li> <li>定时自动刷新</li> <li>@doc
<ul><li><a href="https://bootstrap-table.com/" target="_blank" rel="noopener noreferrer">https://bootstrap-table.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/" target="_blank" rel="noopener noreferrer">http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> @null</li></ul></li> <li>@code <a href="https://github.com/wenzhixin/bootstrap-table" target="_blank" rel="noopener noreferrer">https://github.com/wenzhixin/bootstrap-table<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#table_example&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bootstrapTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token comment">// 返回接口数据字段的自定义</span>
    <span class="token function-variable function">responseHandler</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token comment">// 有些版本说是'rows'，经测试是'data'</span>
            <span class="token string">&quot;data&quot;</span><span class="token operator">:</span> res<span class="token punctuation">.</span>items<span class="token punctuation">,</span>
            <span class="token string">&quot;total&quot;</span><span class="token operator">:</span> res<span class="token punctuation">.</span>recordsTotal
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li><p><code>dataTables</code> @nice</p> <ul><li>开源 功能强大(筛选排序)</li> <li>jquery表格插件 IE8+ @nice</li> <li>一定能力地处理大数据量 @nice</li> <li>支持正则搜索查询 @nice</li> <li>全局默认配置 @nice</li> <li><a href="https://github.com/DataTables/DataTables" target="_blank" rel="noopener noreferrer">https://github.com/DataTables/DataTables<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>中文网 http://www.datatables.club/</li></ul></li> <li><p>easyui-datagrid</p></li> <li><p>jqGrid @nice</p> <ul><li>样式偏死 -&gt; 支持bootstrap样式</li> <li><a href="https://github.com/tonytomov/jqGrid" target="_blank" rel="noopener noreferrer">https://github.com/tonytomov/jqGrid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-商业付费"><a href="#table-商业付费" class="header-anchor">#</a> Table 商业付费</h1> <ul><li><p>ag-grid ($) @nice</p> <ul><li>THE BEST HTML5 GRID IN THE WORLD</li> <li><a href="https://www.ag-grid.com/" target="_blank" rel="noopener noreferrer">https://www.ag-grid.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ag-grid/ag-grid" target="_blank" rel="noopener noreferrer">https://github.com/ag-grid/ag-grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>提供流行框架的各个版本 @nice</li> <li>原生版本 https://www.ag-grid.com/best-javascript-data-grid/</li> <li>vue版本 https://www.ag-grid.com/best-vuejs-data-grid/</li></ul></li> <li><p>handsontable ($) @nice</p> <ul><li>支持modern,能兼容</li> <li><a href="https://github.com/handsontable/handsontable" target="_blank" rel="noopener noreferrer">https://github.com/handsontable/handsontable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://handsontable.com/" target="_blank" rel="noopener noreferrer">https://handsontable.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-表格-deprecated"><a href="#table-表格-deprecated" class="header-anchor">#</a> Table 表格 @deprecated</h1> <ul><li><p>jtable @minor</p> <ul><li>基于jquery</li> <li>增删改查的流水线一体操作 + AJAX @nice</li> <li>可导出EXCEL</li> <li>样式偏死 @deprecated</li> <li>有(.net)技术倾向  @deprecated</li> <li>@code <a href="https://github.com/hikalkan/jtable" target="_blank" rel="noopener noreferrer">https://github.com/hikalkan/jtable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>SlickGrid @old</p> <ul><li>键盘导航</li> <li>单元格编辑</li> <li>新增行</li> <li><a href="https://github.com/mleibman/SlickGrid" target="_blank" rel="noopener noreferrer">https://github.com/mleibman/SlickGrid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jsgrid @deprecated</p> <ul><li>轻量 IE8+</li> <li>基于jquery</li> <li>功能不强 @attention 慎重！！</li> <li>不支持单选</li> <li>获取选中行的数据 rowClass + rowByItem?? @ugly</li> <li><a href="https://github.com/tabalinas/jsgrid" target="_blank" rel="noopener noreferrer">https://github.com/tabalinas/jsgrid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcss.com/jsgrid/1.5.3/jsgrid.min.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcss.com/jsgrid/1.5.3/jsgrid-theme.min.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcss.com/jsgrid/1.5.3/jsgrid.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">

</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>jsGrid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
$(&quot;#jsGrid&quot;).jsGrid({
    width: &quot;100%&quot;,
    height: &quot;400px&quot;,
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    data: [
        { &quot;Name&quot;: &quot;Otto Clay&quot;, &quot;Age&quot;: 25, &quot;Country&quot;: 1, &quot;Address&quot;: &quot;Ap #897-1459 Quam Avenue&quot;, &quot;Married&quot;: false },
        { &quot;Name&quot;: &quot;Connor Johnston&quot;, &quot;Age&quot;: 45, &quot;Country&quot;: 2, &quot;Address&quot;: &quot;Ap #370-4647 Dis Av.&quot;, &quot;Married&quot;: true },
    ],
    fields: [
        { name: &quot;Name&quot;, type: &quot;text&quot;, width: 150, validate: &quot;required&quot; },
        { name: &quot;Age&quot;, type: &quot;number&quot;, width: 50 },
        { name: &quot;Address&quot;, type: &quot;text&quot;, width: 200 },
        { name: &quot;Country&quot;, type: &quot;select&quot;, items: countries, valueField: &quot;Id&quot;, textField: &quot;Name&quot; },
        { name: &quot;Married&quot;, type: &quot;checkbox&quot;, title: &quot;Is Married&quot;, sorting: false },
        { type: &quot;control&quot; }
    ]
});
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></code></pre></div><ul><li>jquery-bootgrid @old
<ul><li><a href="https://github.com/rstaib/jquery-bootgrid" target="_blank" rel="noopener noreferrer">https://github.com/rstaib/jquery-bootgrid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>jquery-dynatable @old
<ul><li><a href="https://github.com/alfajango/jquery-dynatable" target="_blank" rel="noopener noreferrer">https://github.com/alfajango/jquery-dynatable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-样式优化-demo"><a href="#table-样式优化-demo" class="header-anchor">#</a> Table-样式优化 @demo</h1> <ul><li>CSS简单实现
<ul><li><a href="http://www.jq22.com/jquery-info6700" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info6700<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>好看一点的样式
<ul><li><a href="http://www.jq22.com/jquery-info1372" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info1372<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-大数据表格"><a href="#table-大数据表格" class="header-anchor">#</a> Table 大数据表格</h1> <ul><li>Clusterize.js
<ul><li><a href="https://github.com/NeXTs/Clusterize.js" target="_blank" rel="noopener noreferrer">https://github.com/NeXTs/Clusterize.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-表格扩展功能"><a href="#table-表格扩展功能" class="header-anchor">#</a> Table 表格扩展功能</h1> <ul><li><p>固定与滚动</p> <ul><li>固定表格列和表格头部内容可拖拽 <a href="http://www.jq22.com/webqd1769" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1769<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>可滚动的tbody <a href="http://www.jq22.com/webqd3098" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd3098<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Filterizr</p> <ul><li>筛选排序</li></ul></li> <li><p>stacktable.js</p> <ul><li>小屏幕排列</li> <li><a href="https://github.com/johnpolacek/stacktable.js/" target="_blank" rel="noopener noreferrer">https://github.com/johnpolacek/stacktable.js/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="table-表格简单实现-demo"><a href="#table-表格简单实现-demo" class="header-anchor">#</a> Table 表格简单实现 @demo</h1> <ul><li>自动生成表格
<ul><li><a href="http://www.jq22.com/jquery-info3656" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info3656<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1) 设置 tbody 为 display:block</span>
以便我们可以应用 height 和 overflow 属性。

<span class="token comment">// 2) 设置thead 中的 tr元素设置为 display:block</span>
</code></pre></div><h1 id="table-sortable-表格筛选排序"><a href="#table-sortable-表格筛选排序" class="header-anchor">#</a> Table-Sortable 表格筛选排序</h1> <ul><li><p>sortable</p> <ul><li><a href="https://www.awesomes.cn/repo/RubaXa/sortable" target="_blank" rel="noopener noreferrer">https://www.awesomes.cn/repo/RubaXa/sortable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jquery.isotope</p> <ul><li>Filter &amp; sort magical layouts GPL</li></ul></li></ul> <h1 id="table-sortable-筛选排序-demo"><a href="#table-sortable-筛选排序-demo" class="header-anchor">#</a> Table-Sortable 筛选排序 @demo</h1> <ul><li>js表格排序删除操作
<ul><li><a href="http://www.jq22.com/webqd2793" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2793<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;rows&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;time&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2011-4-1 0:00:00&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;李四&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;time&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2015-5-6 12:30:00&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;王五&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;time&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2012-10-1 22:10:00&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;赵六&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;time&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2011-9-1 22:10:00&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> rows <span class="token operator">=</span> data<span class="token punctuation">.</span>rows<span class="token punctuation">;</span>
rows<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>time<span class="token punctuation">)</span> <span class="token operator">-</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>time<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//时间正序</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="table-editable-行内编辑-demo"><a href="#table-editable-行内编辑-demo" class="header-anchor">#</a> Table-Editable 行内编辑 @demo</h1> <ul><li>jquery实现即点即改
<ul><li><a href="http://www.jq22.com/webqd1430" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1430<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'tr td'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> txt <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;input type=&quot;text&quot;&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unbind</span><span class="token punctuation">(</span><span class="token string">'clcik'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> child <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    child<span class="token punctuation">.</span><span class="token function">blur</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> childTxt <span class="token operator">=</span> child<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>childTxt <span class="token operator">==</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            that<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>txt<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            that<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>childTxt<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        that<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h1 id="pagination-分页"><a href="#pagination-分页" class="header-anchor">#</a> Pagination 分页</h1> <ul><li>paginationjs
<ul><li>基于jquery</li> <li><a href="https://github.com/superRaytin/paginationjs" target="_blank" rel="noopener noreferrer">https://github.com/superRaytin/paginationjs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>twbs-pagination
<ul><li>@code <a href="https://github.com/josecebe/twbs-pagination" target="_blank" rel="noopener noreferrer">https://github.com/josecebe/twbs-pagination<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>am-page @old
<ul><li>基于amazeUI</li> <li><a href="https://github.com/lscho/am-page" target="_blank" rel="noopener noreferrer">https://github.com/lscho/am-page<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="pagination-客户端分页-demo"><a href="#pagination-客户端分页-demo" class="header-anchor">#</a> Pagination 客户端分页 @demo</h1> <ul><li>带页码跳转
<ul><li><a href="http://www.jq22.com/jquery-info17447" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info17447<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>自渲染分页
<ul><li>丑 看下原理</li> <li><a href="http://www.jq22.com/jquery-info13810" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info13810<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>简单分页
<ul><li><a href="http://www.jq22.com/webqd1246" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1246<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="tree-树状图"><a href="#tree-树状图" class="header-anchor">#</a> Tree 树状图</h1> <ul><li><p>zTree @nice</p> <ul><li>IE6+</li> <li>@code <a href="https://github.com/zTree/zTree_v3" target="_blank" rel="noopener noreferrer">https://github.com/zTree/zTree_v3<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="http://www.treejs.cn/v3/main.php#_zTreeInfo" target="_blank" rel="noopener noreferrer">http://www.treejs.cn/v3/main.php#_zTreeInfo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>bootstrap样式改造版 @nice
<ul><li>图片改造不全 -&gt; 需要设计小姐姐</li> <li><a href="http://www.jq22.com/jquery-info15563" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info15563<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li> <li><p>jstree @nice</p> <ul><li>IE8+</li> <li>样式相对好看</li> <li>@code <a href="https://github.com/vakata/jstree" target="_blank" rel="noopener noreferrer">https://github.com/vakata/jstree<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="tree-table-树状表格"><a href="#tree-table-树状表格" class="header-anchor">#</a> Tree-Table 树状表格</h1> <ul><li><p>fancytree</p> <ul><li>IE8+</li> <li><a href="https://github.com/mar10/fancytree" target="_blank" rel="noopener noreferrer">https://github.com/mar10/fancytree<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jquery-treegrid</p> <ul><li><a href="https://github.com/maxazan/jquery-treegrid" target="_blank" rel="noopener noreferrer">https://github.com/maxazan/jquery-treegrid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>tui.grid @nice</p> <ul><li>支持IE8+ | 行内编辑</li> <li><a href="https://github.com/nhnent/tui.grid" target="_blank" rel="noopener noreferrer">https://github.com/nhnent/tui.grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>treegrid</p></li></ul> <h1 id="chart-图表"><a href="#chart-图表" class="header-anchor">#</a> Chart 图表</h1> <p>-&gt;&gt;</p> <h1 id="editor-富文本编辑器"><a href="#editor-富文本编辑器" class="header-anchor">#</a> Editor 富文本编辑器</h1> <ul><li>tinymce @nice</li> <li>tui.editor
<ul><li>@code <a href="https://github.com/nhn/tui.editor" target="_blank" rel="noopener noreferrer">https://github.com/nhn/tui.editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>ace
<ul><li><a href="https://github.com/ajaxorg/ace" target="_blank" rel="noopener noreferrer">https://github.com/ajaxorg/ace<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>editor
<ul><li><a href="https://github.com/ory/editor" target="_blank" rel="noopener noreferrer">https://github.com/ory/editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>draft-js @nice
<ul><li>基于React</li> <li>@code <a href="https://github.com/facebook/draft-js" target="_blank" rel="noopener noreferrer">https://github.com/facebook/draft-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>quill @nice
<ul><li>图片有坑??</li> <li>@code <a href="https://github.com/quilljs/quill" target="_blank" rel="noopener noreferrer">https://github.com/quilljs/quill<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>wangeditor @nice
<ul><li>个人维护</li></ul></li> <li>medium-editor
<ul><li>原生JS IE兼容</li> <li>@code <a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer">https://github.com/yabwe/medium-editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>stackedit
<ul><li>@code <a href="https://github.com/benweet/stackedit" target="_blank" rel="noopener noreferrer">https://github.com/benweet/stackedit<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="富文本-经典"><a href="#富文本-经典" class="header-anchor">#</a> 富文本-经典</h1> <ul><li>ckeditor</li> <li>kindeditor</li></ul> <h1 id="富文本-other"><a href="#富文本-other" class="header-anchor">#</a> 富文本 @other</h1> <ul><li><p>ueditor @old</p> <ul><li>国内</li></ul></li> <li><p>neditor</p> <ul><li>基于Ueditor优化</li> <li><a href="https://gitee.com/notadd/neditor" target="_blank" rel="noopener noreferrer">https://gitee.com/notadd/neditor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>x-editable</p> <ul><li>jquery考虑</li> <li><a href="https://github.com/vitalets/x-editable" target="_blank" rel="noopener noreferrer">https://github.com/vitalets/x-editable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>mavonEditor</p> <ul><li>@code <a href="https://github.com/hinesboy/mavonEditor" target="_blank" rel="noopener noreferrer">https://github.com/hinesboy/mavonEditor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>slate @nice</p> <ul><li>完全可定制</li> <li><a href="https://github.com/ianstormtaylor/slate" target="_blank" rel="noopener noreferrer">https://github.com/ianstormtaylor/slate<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>summernote</p> <ul><li><a href="https://github.com/summernote/summernote" target="_blank" rel="noopener noreferrer">https://github.com/summernote/summernote<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>wysiwyg</p> <ul><li><a href="https://github.com/mindmup/bootstrap-wysiwyg/" target="_blank" rel="noopener noreferrer">https://github.com/mindmup/bootstrap-wysiwyg/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>sqire</p></li> <li><p>pell</p> <ul><li>超轻量的 WYSIWYG 文本编辑器</li></ul></li></ul> <h1 id="editor-markdown-编辑器"><a href="#editor-markdown-编辑器" class="header-anchor">#</a> Editor-Markdown 编辑器</h1> <ul><li>simplemde-markdown-editor
<ul><li><a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank" rel="noopener noreferrer">https://github.com/sparksuite/simplemde-markdown-editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>A markdown parser and compiler. Built for speed</li> <li><a href="https://github.com/chjj/markedmarked" target="_blank" rel="noopener noreferrer">https://github.com/chjj/markedmarked<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>wysiwyg
<ul><li><a href="https://github.com/jgthms/wysiwyg.css" target="_blank" rel="noopener noreferrer">https://github.com/jgthms/wysiwyg.css<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>A tiny CSS for generated HTML or Markdown content</li></ul></li> <li>marked</li></ul> <h1 id="clipboard-复制粘贴"><a href="#clipboard-复制粘贴" class="header-anchor">#</a> Clipboard 复制粘贴</h1> <ul><li>clipboard.js
<ul><li><a href="https://github.com/zenorocha/clipboard.js" target="_blank" rel="noopener noreferrer">https://github.com/zenorocha/clipboard.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>zeroclipboard
<ul><li>兼容ie 用到flash</li> <li><a href="https://github.com/zeroclipboard/zeroclipboard" target="_blank" rel="noopener noreferrer">https://github.com/zeroclipboard/zeroclipboard<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="storage-本地存储"><a href="#storage-本地存储" class="header-anchor">#</a> Storage 本地存储</h1> <ul><li>store.js
<ul><li><a href="https://github.com/marcuswestin/store.js" target="_blank" rel="noopener noreferrer">https://github.com/marcuswestin/store.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>localForage
<ul><li><a href="https://github.com/localForage/localForage" target="_blank" rel="noopener noreferrer">https://github.com/localForage/localForage<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>lowdb???</li></ul> <h1 id="db-数据库"><a href="#db-数据库" class="header-anchor">#</a> DB 数据库</h1> <ul><li><p>Dexie.js @nice</p> <ul><li>A Minimalistic Wrapper for <code>IndexedDB</code></li> <li><a href="https://github.com/dfahlander/Dexie.js" target="_blank" rel="noopener noreferrer">https://github.com/dfahlander/Dexie.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>rxdb @nice</p> <ul><li>A realtime Database for JavaScript Applications</li> <li><a href="https://github.com/pubkey/rxdb" target="_blank" rel="noopener noreferrer">https://github.com/pubkey/rxdb<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jsonbase</p> <ul><li>关系型数据库, 存储JSON</li> <li><a href="https://github.com/Devs-Garden/jsonbase" target="_blank" rel="noopener noreferrer">https://github.com/Devs-Garden/jsonbase<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="browser-浏览器信息"><a href="#browser-浏览器信息" class="header-anchor">#</a> Browser 浏览器信息</h1> <ul><li>ua-parser-js
<ul><li><a href="https://github.com/faisalman/ua-parser-js" target="_blank" rel="noopener noreferrer">https://github.com/faisalman/ua-parser-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="filetype-文件类型判断"><a href="#filetype-文件类型判断" class="header-anchor">#</a> FileType 文件类型判断</h1> <ul><li>file-type
<ul><li>用于检测 Buffer / Uint8Array / ArrayBuffer 文件类型的库</li> <li>@code <a href="https://github.com/sindresorhus/file-type" target="_blank" rel="noopener noreferrer">https://github.com/sindresorhus/file-type<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> readChunk <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'read-chunk'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> fileType <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'file-type'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> buffer <span class="token operator">=</span> readChunk<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token string">'unicorn.png'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> fileType<span class="token punctuation">.</span>minimumBytes<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">fileType</span><span class="token punctuation">(</span>buffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//=&gt; {ext: 'png', mime: 'image/png'}</span>
</code></pre></div><h1 id="proxy-代理"><a href="#proxy-代理" class="header-anchor">#</a> Proxy 代理</h1> <ul><li>jsproxy
<ul><li>一个基于浏览器端 JS 实现的在线代理</li> <li><a href="https://github.com/EtherDream/jsproxy" target="_blank" rel="noopener noreferrer">https://github.com/EtherDream/jsproxy<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h1> <ul><li><p>You-Dont-Need-Momentjs</p> <ul><li><a href="https://github.com/you-dont-need/You-Dont-Need-Momentjs" target="_blank" rel="noopener noreferrer">https://github.com/you-dont-need/You-Dont-Need-Momentjs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>jspreadsheets-数据表格排行</code> @nice</p> <ul><li><a href="https://jspreadsheets.com/" target="_blank" rel="noopener noreferrer">https://jspreadsheets.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>最好看的表格 @simple</p> <ul><li><a href="https://colorlib.com/wp/css3-table-templates/" target="_blank" rel="noopener noreferrer">https://colorlib.com/wp/css3-table-templates/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Crisp table <a href="http://codepen.io/stursby/pen/HdiJh" target="_blank" rel="noopener noreferrer">http://codepen.io/stursby/pen/HdiJh<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>heavy table <a href="http://codepen.io/victordarras/pen/hJHAm?editors=0110" target="_blank" rel="noopener noreferrer">http://codepen.io/victordarras/pen/hJHAm?editors=0110<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>jQuery分页插件</p> <ul><li><a href="http://www.jq22.com/jquery-info13734" target="_blank" rel="noopener noreferrer">http://www.jq22.com/jquery-info13734<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/04--han-shu-ku-lodash.html" class="prev">
        函数库(Lodash)
      </a></span> <span class="next"><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/06--ti-gang--dong-xiao-zhuang-shi-dom-anim-icon-typo.html">
        [E]动画+排版+色彩
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/plana/assets/js/app.26a35d46.js" defer></script><script src="/plana/assets/js/2.b5bc497d.js" defer></script><script src="/plana/assets/js/365.060bb2cd.js" defer></script>
  </body>
</html>
